Add new menu item without affect the current menu item
I have this in my app.js
<Refine dataProvider={dataProvider(supabaseClient)}
routerProvider={routerBindings}
resources={[{name: "users",
list: "/users", }, {name: "canvases",
list: "/canvases",
}, { name: "patient",
list: "/patient",
show: "/patient/show/:id",
create: "/patient/create",
meta: { label: "Patients" }, }]}>
I want to add a new menu item for create: "/patient/create" separately without affecting the current { name: "patient",
list: "/patient",
show: "/patient/show/:id",
create: "/patient/create",
meta: { label: "Patients" }, }
8 Replies
Hi @lukevo.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To add a new menu item for
create: "/patient/create"
separately without affecting the current resource configuration, you can define a new resource with a different name but the same create
path. However, please note that the useMenu
hook in refine generates menu items based on the resources defined in the Refine
component. If you have two resources with the same create
path, useMenu
will only generate a menu item for the first one.
To create separate menu items for each resource, you can use the meta.parent
property to nest resources under different parent labels. Here's an example:
In this example, a new menu item "Create Patient" will be created under the "Patients" menu. When clicked, it will navigate to the "/patient/create" path.
Please note that this is a workaround and might not be the best solution depending on your use case. For more information, refer to the resources documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#resources).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-goldOP•13mo ago
@kapa.ai no, I still want to use patient for /patient/create
Let me check the knowledge base for you. One moment! :books:
----------------------
If you want to use the same
patient
resource for the create
path but have a separate menu item, you can create a custom menu item using the useNavigation
hook. This hook provides a navigate
function that you can use to navigate to the create
path of the patient
resource.
Here's an example of how you can add a custom menu item:
In this example, a new menu item "Create Patient" is added to the menu. When clicked, it navigates to the create
path of the patient
resource. The patient
resource is still used for the create
path, but a separate menu item is created for it.
Please note that this is a workaround and might not be the best solution depending on your use case. For more information, refer to the useNavigation documentation (https://refine.dev/docs/api-reference/hooks/navigation/useNavigation/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-goldOP•13mo ago
@kapa.ai I use this as the reference: https://github.com/refinedev/refine/tree/master/examples/pixels-admin
The example structure use menu item automatic creation using resource in Refine
I want to modify the sider, how, not creating a new one but just to modify it and add in a new menu item
GitHub
refine/examples/pixels-admin at master · refinedev/refine
A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibilty. - refinedev/refine
Let me check the knowledge base for you. One moment! :books:
----------------------
To modify the existing Sider and add a new menu item, you can use the
render
property of the <Sider>
component. The render
property is a function that receives an object with the items
and logout
properties. The items
property is the list of navigation items and the logout
property is the logout button. You can add your custom elements in this function.
Here's an example of how you can modify the Sider to add a new menu item:
In this example, a new navigation link "Create Patient" is added to the Sider. When clicked, it will redirect to the create page of the "patient" resource.
Please note that this is a simple example and you might need to adjust it according to your needs. For instance, you might want to style the new navigation link to make it look like the other items, or add some logic to only show it to certain users.
For more information, you can refer to the Refine FAQ (https://refine.dev/docs/faq/) and the Customization Sider Example (https://github.com/refinedev/refine/tree/master/examples/customization-sider) on GitHub.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below