stormy-gold•10mo ago

Add a custom nested menu item with position defined

export const resources: IResourceItem[] = [ { name: "users", list: "/users", identifier: "users", }, { name: "patient", identifier: "patient_parent", meta: { label: "Patients", } }, { name: "patient", list: "/patient", create: "/patient/create", identifier: "patient_list", meta: { label: "Patient List", parent: "patient_parent", }, } ]; This are my resources, I know that Sider will automatically create a list of items like this structure. I do have a custom Sider created using Swizzle. I also know that Sider won't automatically create a "create" menu item in the Sider, only "list" are being automatically created. So I want to create a separated menu item called "Create Patient", path is "/patient/create", how do I do that? Also correct me if I have any information wrong

5 Replies

kapa.ai•10mo 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: ---------------------- You're correct that the Sider component in Refine automatically creates a list of items based on the list property in your resources. However, it doesn't automatically create a "create" menu item. To add a "Create Patient" menu item, you can customize your Sider component using the render property. 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. Here's an example of how you can add a "Create Patient" menu item:

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 {items}  
 <a href="/patient/create">Create Patient</a>  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  
  
const CustomLayout = () => {  
 return <Layout Sider={CustomSider}>...</Layout>;  
};

import { Layout, Sider } from "@refinedev/antd";  
  
const CustomSider = () => {  
 return (  
 <Sider  
 render={({ items, logout }) => {  
 return (  
 <>  
 {items}  
 <a href="/patient/create">Create Patient</a>  
 {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 documentation (https://refine.dev/docs/faq/#how-can-i-add-an-item-to-the-sider-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

stormy-gold•10mo ago

Currently I have a separate file to listed out all the resources like this: export const resources: IResourceItem[] = [ { name: "users", list: "/users", identifier: "users", }, { name: "patient", identifier: "patient_parent", meta: { label: "Patients", } }, { name: "patient", list: "/patient", create: "/patient/create", identifier: "patient_list", meta: { label: "Patient List", parent: "patient_parent", }, } ]; and import them to resource in <Refine> in App.tsx, if I create a new custom menu item like you said. Where should I create that? In my sider.tsx? But that won't let me have the control to modify the position of the menu item(s). It will just render at the bottom of whatever the auto generated menu items from the resource are? Correct? Then what's the best way for me to have full customization on all the menu items in the SIder? @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you're correct. If you add a custom menu item using the render property in the Sider component, it will be rendered at the bottom of the auto-generated menu items from the resources. If you want full control over the order and position of the menu items, you might need to manually create each menu item in the Sider component. This means you'll need to iterate over your resources and create a menu item for each resource in the order you want. Here's an example of how you can do this:

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

const resources = [
    {
        name: "users",
        list: "/users",
        identifier: "users",
    },
    {
        name: "patient",
        identifier: "patient_parent",
        meta: {
            label: "Patients",
        }
    },
    {
        name: "patient",
        list: "/patient",
        create: "/patient/create",
        identifier: "patient_list",
        meta: {
            label: "Patient List",
            parent: "patient_parent",
        },
    }
];

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ logout }) => {  
 return (  
 <>  
 {resources.map(resource => (
   <a href={resource.list}>{resource.meta.label}</a>
 ))}
 <a href="/patient/create">Create Patient</a>  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

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

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

const resources = [
    {
        name: "users",
        list: "/users",
        identifier: "users",
    },
    {
        name: "patient",
        identifier: "patient_parent",
        meta: {
            label: "Patients",
        }
    },
    {
        name: "patient",
        list: "/patient",
        create: "/patient/create",
        identifier: "patient_list",
        meta: {
            label: "Patient List",
            parent: "patient_parent",
        },
    }
];

const CustomSider = () => {  
 return (  
 <Sider  
 render={({ logout }) => {  
 return (  
 <>  
 {resources.map(resource => (
   <a href={resource.list}>{resource.meta.label}</a>
 ))}
 <a href="/patient/create">Create Patient</a>  
 {logout}  
 </>  
 );  
 }}  
 />  
 );  
};  

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

In this example, we're manually creating a menu item for each resource in the resources array. The "Create Patient" menu item is also manually added. This gives you full control over the order and position of the menu items. 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 add some logic to only show certain menu items to certain users, or style the menu items to make them look like the other items. For more information, you can refer to the Refine documentation (https://refine.dev/docs/faq/#how-can-i-add-an-item-to-the-sider-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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