Nested Collapsible Sidebar Block for React

The first level is a SidebarMenuItem whose button is the Collapsible trigger. Its content is a SidebarMenuSub, and each topic in it is a SidebarMenuSubItem holding another Collapsible, whose trigger is a real button styled like a sub-menu row and whose content is a second SidebarMenuSub of article links. The folds are independent: opening a category leaves its topics as they were, so a topic you opened before stays open when you come back.

It opens only the two folds above the open article, the category and the topic, and leaves every other fold alone, then scrolls the article's link to the middle of the rail. It is useful after you follow a related link on the page into a fold that is shut: the status line says so, and the button wakes up. When the article is already showing, the button is dimmed with aria-disabled but stays in place, and pressing it says "already showing" instead of doing nothing silently.

As a list of fold ids, open, in the block's state. Each fold is controlled by isOpen(open, id), the count beside the button is its length, and Reveal active is a pure step from one list to another. Opening and closing animates with the catalog's own motion, which reduced motion switches off. The block does not store anything outside the page.

The menu button or the rail along the edge folds it to the four category icons with tooltips. The topics and articles are hidden there, so pressing a category icon unfolds the rail and opens that category. 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 sixteen articles are typed in CATEGORIES at the top of the file, and choosing one swaps the page's text in the block's own state; nothing is fetched. The links go to # whose handler shows the article instead of navigating. The category rows are SidebarMenuButtons that flip their own fold: each 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. The topic rows are real CollapsibleTriggers. The article links are SidebarMenuSubButtons with an href. Point them 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 folds and Reveal active work inside it, and choosing an article closes the sheet and puts focus back on the button. The status line under the page says what opened and how many folds are open.