Nested sidebar collapse keep getting auto collapse whenever sidebar link changes

[studiolama]

Describe the bug
I am using with <Sidebar.collapse /> but in nested format
like <Sidebar.collapse > <Sidebar.collapse /> </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

[rluders]

[rluders]

@studiolama do you mind providing a sample repository or some better code sample so people can use it to test the scenario? Thank you.

[studiolama]

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

[rluders]

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.

[studiolama]

so any solution for it ?