How to place my submenus on the right from the sider instead of placing them under it

Is there a simple way to do that?

13 Replies

Hi @acidias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can find more information about refine in the documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

kapa.ai•2y ago

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

sensitive-blueOP•2y ago

@kapa.ai I would like to have my child element not to show under the employees but rather on its right side

          resources={[
            {
              name: "building-plans",
              list: BuildingPlan,
              show: BuildingsDetail,
              create: CreateBuildingPlan,
              edit: EditBuildingPlan,
              icon: <ArticleOutlined />,
            },
            {
              name: "employees",
              list: EmployeeList,
              create: AddEmployee,
              icon: <PeopleIcon />,
            },
            {
              name: "contracts",
              list: AllContracts,
              icon: <AddHomeWorkOutlinedIcon />,
            },
            {
              name: "my-profile",
              icon: <AccountCircleOutlined />,
              meta: {
                label: "My Profile",
                parent: "employees",
              },
              list: MyProfile,
            },
          ]}

          resources={[
            {
              name: "building-plans",
              list: BuildingPlan,
              show: BuildingsDetail,
              create: CreateBuildingPlan,
              edit: EditBuildingPlan,
              icon: <ArticleOutlined />,
            },
            {
              name: "employees",
              list: EmployeeList,
              create: AddEmployee,
              icon: <PeopleIcon />,
            },
            {
              name: "contracts",
              list: AllContracts,
              icon: <AddHomeWorkOutlinedIcon />,
            },
            {
              name: "my-profile",
              icon: <AccountCircleOutlined />,
              meta: {
                label: "My Profile",
                parent: "employees",
              },
              list: MyProfile,
            },
          ]}

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- To display the child element (My Profile) on the right side of the employees instead of under it, you can customize the default sidebar by using refine hooks and passing custom components to the Sider property. You can refer to the useMenu hook documentation (https://refine.dev/docs/api-reference/core/hooks/ui/useMenu/) for detailed sidebar customization. However, the provided extracts do not contain a specific example of how to achieve this exact layout. You may need to create a custom sidebar component and use CSS or a layout library to position the child element on the right side of the employees. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

useMenu | refine

useMenu is used to get menu items derived from the resources. These items include a link to the dashboard page (if it exists) and links to the user-defined resources (passed as children to ``).

kapa.ai•2y ago

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

sensitive-blueOP•2y ago

@kapa.ai

            {
              name: "business",
              show: BusinessDetails,
              icon: <ArchitectureOutlined />,
              children: [
                {
                  name: "employees",
                  list: EmployeeList,
                  create: AddEmployee,
                  icon: <PeopleIcon />,
                },
              ],
            },

            {
              name: "business",
              show: BusinessDetails,
              icon: <ArchitectureOutlined />,
              children: [
                {
                  name: "employees",
                  list: EmployeeList,
                  create: AddEmployee,
                  icon: <PeopleIcon />,
                },
              ],
            },

How to add Children Menu to my business?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y ago

---------------------- To create a multi-level menu with children, you can use the children property in your resource configuration. However, the provided extracts do not contain a specific example of how to achieve this with the given code snippet. You can refer to the Multi-Level Menu documentation (https://refine.dev/docs/advanced-tutorials/multi-level-menu) for more information on creating multi-level menus in refine. The example output in the Headless section (https://refine.dev/docs/advanced-tutorials/multi-level-menu#headless) shows how the menu items are structured with children. You may need to customize the sidebar component to display the child menu items properly. Use the useMenu hook (https://refine.dev/docs/api-reference/core/hooks/ui/useMenu/) to get the menu items and create your custom sidebar component accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Multi Level Menu | refine

This document is related to how to create a multi-level menu for refine applications.

useMenu | refine

useMenu is used to get menu items derived from the resources. These items include a link to the dashboard page (if it exists) and links to the user-defined resources (passed as children to ``).

kapa.ai•2y ago

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

plain-purple•2y ago

if i understand correct, you need to create your own Sidebar you can use like this: https://refine.dev/docs/api-reference/antd/components/antd-themed-layout/#props but maybe i couldn't correctly imagine your question. can you give me more detail ?

sensitive-blueOP•2y ago

I want just to modify the styling so not do show under the parent menu, but right to it. But I can compromise for now and later will change the whole Sidebar most likely 🙂