Open studiolama opened 1 year ago
@studiolama do you mind providing a sample repository or some better code sample so people can use it to test the scenario? Thank you.
ok @rluders here is the sample json format of the sidebar tabs that i am using
[
{
"label": "LEADS",
"id": "dashboard_menu_02",
"options": [
{
"id": "dashboard_option21",
"title": "Enquiry",
"icon": "BsInfoCircleFill",
"link": "/leads/enquire",
"hasSubmenu": false
},
{
"id": "dashboard_option22",
"title": "Request Info",
"icon": "BsQuestionCircleFill",
"link": "leads/request-info",
"hasSubmenu": false
}
]
},
{
"label": "APPLICATIONS",
"id": "dashboard_menu_03",
"options": [
{
"id": "dashboard_option31",
"title": "Lists",
"icon": "BsFillPersonLinesFill",
"hasSubmenu": true,
"submenu": [
{
"id": "dashboard_submenu31",
"title": "B2C",
"icon": "BiGroup",
"link": "/b2c"
},
{
"id": "dashboard_submenu32",
"title": "B2B ",
"icon":"HiOutlineBuildingOffice2",
"link": "/b2b"
}
]
},
{
"id": "dashboard_option32",
"title": "Form",
"icon": "BsPersonVcardFill",
"link": "/form"
}
]
},
{
"label": "IT",
"id": "dashboard_menu_13",
"options": [
{
"id": "dashboard_option131",
"title": "Settings",
"icon": "GoSettings",
"hasSubmenu": true,
"submenu": [
{
"id": "dashboard_submenu131",
"title": "Defaults",
"icon": "BiRefresh",
"isNested": true,
"menu": [
{
"id": "dashboard_nestedmenu131a",
"title": "Country",
"link": "/defaults/country"
},
]
},
{
"id": "dashboard_submenu132",
"title": "Leads",
"icon": "MdOutlineMarkEmailUnread",
"isNested": true,
"menu": [
{
"id": "dashboard_nestedmenu132a",
"title": "Lead Type",
"link": "/leads/type"
},
{
"id": "dashboard_nestedmenu132b",
"title": "Lead Source",
"link": "/leads/source"
}
]
}
]
}
]
}
]
and this is how i am using it
<Sidebar collapsed={collapsed} className="shadow-lg bg-white sidebar rounded-none">
<Sidebar.Items>
<Sidebar.ItemGroup>
{dashboardMenu.map(({ label, id, options }, key) => (
<div key={key}>
{
label &&
<Badge color={theme === "light" ? "info" : "indigo"}>{label}</Badge>
}
{
options.map((menuItem) => {
return (
menuItem.hasSubmenu ?
<Sidebar.Collapse label={menuItem.title} key={menuItem.id} href="#" icon={menuItem.icon}>
{
menuItem.submenu.map((subitem, subkey) => {
return (
subitem.isNested ?
<Sidebar.Collapse label={subitem.title} key={subitem.id + key} href="#" icon={subitem.icon}>
{
subitem.menu.map((nesteditem, neskey) => {
return (
<Sidebar.Item
key={neskey}
className="text-sm sidebar-nested-item"
href={nesteditem.link}
as={Link}
active={currentRoute.includes(nesteditem.link)}
>
{nesteditem.title}
</Sidebar.Item>
)
})
}
</Sidebar.Collapse>
:
<Sidebar.Item
key={subkey}
className="text-sm"
icon={subitem.icon}
href={subitem.link}
as={Link}
active={currentRoute.includes(subitem.link)}
>
{subitem.title}
</Sidebar.Item>
)
})
}
</Sidebar.Collapse>
:
<Sidebar.Item
key={menuItem.id}
icon={menuItem.icon}
href={menuItem.link}
as={Link}
className="text-sm mt-3 font-semibold"
active={currentRoute.includes(menuItem.link)}
>
{menuItem.title}
</Sidebar.Item>
)
})
}
</div>
))}
</Sidebar.ItemGroup>
</Sidebar.Items>
</Sidebar>
i hope this will help
It seems that we are using Accordion
in our new documentation layout (here) I'm wondering if the issue that you reported could be the reason for that.
so any solution for it ?
Describe the bug I am using with but in nested format
like </Sidebar.collapse>
Whenever i am clicking on any sidebar option nested sidebar collapse items are auto collapsing
Expected behavior Changing/Clicking sidebar option should persist sidebar collapse item previous state(show/hide)
System information:
Device: Asus vivobook s14 Resolution: 1920*1080 OS: Window 11 Browser: Chrome Version: 113.0.5672.93 Project information:
Tailwind: 3.3.2 Flowbite: 1.6.5 Flowbite React: 0.4.4 Type: npx create-next-app@latest