How to create nested drawer mobile navigation using HeadlessUI and React

Question

I'm stuck on recreating the nested drawer navigation for mobile, similar to fashiontofigure.com. I can get the nested drawer to open just fine, but the content only shows the last category's items rather than the selected category.

Here's the menu JSON:

{
    "items": [
        {
            "title": "Vaporizers",
            "url": "",
            "items": [
                {
                    "title": "FOR FLOWER & CONCENTRATES",
                    "items": [
                        {
                            "title": "COMPANY PLUS",
                            "url": "/products/COMPANY-plus"
                        },
                        {
                            "title": "COMPANY MINI",
                            "url": "/products/COMPANY-mini"
                        }
                    ],
                    "url": "/collections/dry-herb-and-concentrate-vaporizers"
                },
                {
                    "title": "FOR OIL EXTRACT PODS",
                    "items": [
                        {
                            "title": "COMPANY ERA",
                            "url": "/products/COMPANY-era"
                        },
                        {
                            "title": "ERA PRO",
                            "url": "/products/era-pro"
                        }
                    ],
                    "url": "/collections/oil-extract-vape-pens"
                },
                {
                    "title": "ON SALE",
                    "items": [],
                    "url": "/collections/sale"
                }
            ],
            "useShowcaseComponent": true
        },
        {
            "title": "Cannabis",
            "url": "",
            "items": [
                {
                    "title": "COMPANY Infused",
                    "url": "/products/cannabis/COMPANY-infused"
                },
                {
                    "title": "COMPANY Live Rosin",
                    "url": "/products/cannabis/COMPANY-live"
                },
                {
                    "title": "COMPANY Diamonds",
                    "url": "/products/cannabis/COMPANY-diamonds"
                }
            ]
        },
        {
            "title": "Find",
            "url": "",
            "items": [
                {
                    "title": "Events",
                    "url": "/pages/COMPANY-events"
                },
                {
                    "title": "Retailers",
                    "url": "/pages/store-locator"
                }
            ]
        }
    ]
}

Header:

<MenuDrawer isOpen={isMenuOpen} onClose={closeMenu}>
  <TopLevelMenuNav
    menu={menu}
    closeMenuItem={closeMenuItem}
    openMenuItem={openMenuItem}
    isMenuItemOpen={isMenuItemOpen}
  />
</MenuDrawer>

TopLevelMenuNav:

{(menu?.items || []).map((category) => (
  <div key={category.title}>
    <button
      onClick={openMenuItem}
      className="flex flex-row justify-between p-4 align-middle text-2xl"
    >
      {category.title}
      <ChevronRightIcon className="ml-1 h-4 w-4 self-center" />
    </button>
    <MenuDrawer isOpen={isMenuItemOpen} onClose={closeMenuItem}>
      <MenuItemNav category={category} />
    </MenuDrawer>
  </div>
))}

And MenuItemNav:

<div className="flex flex-col">
  {category.items.map((section) => (
    <div key={section.title} className="flex flex-col hover:bg-gray-50">
      <a href={section.url} className="py-4 px-6 font-normal text-gray-500">
        {section.title}
      </a>
      {section?.items && (
        <div className="flex flex-col pl-8">
          {section.items.map((item) => (
            <div key={item.title} className="flex hover:bg-gray-50">
              <a
                href={item.url}
                className="py-2 font-semibold text-gray-900"
              >
                {item.title}
              </a>
            </div>
          ))}
        </div>
      )}
    </div>
  ))}
</div>

I've tried using useState to set the content to be displayed in the MenuItemNav component, but again it just shows the last categories' content (i.e., Events, Retailers)

Answer 1

I figured out what I was doing wrong; I needed to have my root component (Header) handle both drawers' open and closed states. In my TopLevelMenuNav component, I had a separate setState hook for setting the content passed into the nested drawer.