Sub-Menus Sidebar Block for React

In One at a time, afterToggle returns a list of just the section you opened, so the others close, and the status line says which: "Opened Baking. Dinner closed. 1 open." In Keep open it adds the section to the list instead. Switching to One at a time with several open keeps only the section that holds the current page, or the first open one if none does, and says what it closed. Switching to Keep open changes nothing until you open another.

With focus on a section's row, the arrow toward the end of the line opens its sub-menu, and the one toward the start closes it. With focus on a collection, the start arrow closes its section and puts focus back on the section's row. In a right-to-left layout the two arrows swap, because the block reads the direction from the element. The keys are caught for the whole rail in the capture phase, because React Aria's buttons stop a key before it bubbles, and they obey the mode: in One at a time, opening with the arrow closes the others too. Enter and Space still toggle a row.

It is the length of the list of open sections, shown under the mode switch and spoken in the status line after every change. It is never typed, so it cannot disagree with what is open.

The menu button or the rail along the edge folds it to the five section icons with tooltips, and the sub-menus and the mode switch are hidden. Pressing a section icon unfolds the rail and opens that section. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.

Everything. The fifteen collections and their recipes are typed in SECTIONS at the top of the file, and choosing one swaps the list in the block's own state; nothing is saved. The collections are links to # whose handler shows the list instead of navigating. Each section row is a SidebarMenuButton that flips its own sub-menu: it carries its own aria-expanded and a press handler, onClick, over a controlled Collapsible, rather than being the Collapsible's trigger, because a row's tooltip and a trigger would both claim the button's id. Point the links at your routes and mark the current one with isActive and aria-current.

Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The mode switch and the sub-menus are inside it, and choosing a collection closes the sheet and puts focus back on the button. The status line under the page says what opened and how many sections are open.