narrow-beige•12mo ago

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

kapa.ai•12mo ago

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:

<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" },
        },
        { 
            name: "patientCreate",
            create: "/patient/create",
            meta: { parent: "Patients", label: "Create Patient" },
        },
    ]}
>

<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" },
        },
        { 
            name: "patientCreate",
            create: "/patient/create",
            meta: { parent: "Patients", label: "Create Patient" },
        },
    ]}
>

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: ----------------------

kapa.ai•12mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below

narrow-beige•12mo ago

@kapa.ai no, I still want to use patient for /patient/create

kapa.ai•12mo ago

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:

import { useNavigation } from "@pankod/refine";

const CustomMenuItem = () => {
    const { navigate } = useNavigation();

    return (
        <Menu.Item onClick={() => navigate("/patient/create")}>
            Create Patient
        </Menu.Item>
    );
};

// In your layout component
const CustomLayout: React.FC = ({ children }) => {
    return (
        <Layout>
            <Sider width={200}>
                <Menu mode="inline">
                    <CustomMenuItem />
                    {/* Other menu items */}
                </Menu>
            </Sider>
            <Layout>
                <Content>{children}</Content>
            </Layout>
        </Layout>
    );
};

// In your Refine component
<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" }},
        }},
    ]}}
    Layout={CustomLayout}
>

import { useNavigation } from "@pankod/refine";

const CustomMenuItem = () => {
    const { navigate } = useNavigation();

    return (
        <Menu.Item onClick={() => navigate("/patient/create")}>
            Create Patient
        </Menu.Item>
    );
};

// In your layout component
const CustomLayout: React.FC = ({ children }) => {
    return (
        <Layout>
            <Sider width={200}>
                <Menu mode="inline">
                    <CustomMenuItem />
                    {/* Other menu items */}
                </Menu>
            </Sider>
            <Layout>
                <Content>{children}</Content>
            </Layout>
        </Layout>
    );
};

// In your Refine component
<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" }},
        }},
    ]}}
    Layout={CustomLayout}
>

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: ----------------------

kapa.ai•12mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below

narrow-beige•12mo 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

kapa.ai•12mo ago

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:

import { Layout, Sider } from "@refinedev/antd";  

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>
 <a href="/patient/create">Create Patient</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/antd";  

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>
 <a href="/patient/create">Create Patient</a>  
 {items}  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

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: ----------------------

kapa.ai•12mo ago

<@582491401715974144> kapa.ai is still learning and improving, please let us know how it did by reacting below