probable-pink
probable-pink13mo ago

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
kapa.ai
kapa.ai13mo ago
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
kapa.ai13mo 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
kapa.ai13mo ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
probable-pink
probable-pink13mo 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
kapa.ai13mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai13mo 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
kapa.ai13mo ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
probable-pink
probable-pink13mo 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
kapa.ai13mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai13mo 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
kapa.ai13mo ago
<@134090892167479296> kapa.ai is still learning and improving, please let us how it did by reacting below
stormy-gold
stormy-gold13mo 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 ?
probable-pink
probable-pink13mo 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 🙂