Dual Column Sidebar Block for React

The catalog Sidebar draws a single column at --sidebar-width, which this block sets to 22rem on the provider. Inside it the block puts one flex row: a 3rem rail with the section buttons, and a panel that takes the rest. Because the rail is as wide as the icon-collapsed sidebar (3rem), folding the Sidebar to icons leaves exactly the rail; the panel carries in-data-[collapsible=icon]:hidden and goes with the labels. No second Sidebar and no extra state are involved: the fold, the trigger, the edge rail and the phone sheet are the catalog's own.

The block keeps two things: the open page, and the section you are browsing. They differ once you press another section's button. The button of the section that holds the open page keeps aria-current="true" and its name becomes "Shop, holds the open page"; while you browse elsewhere it also wears a small dot, so you can find your way back. The pressed button is the one whose panel is showing (aria-pressed). Choosing a page in the panel opens it and makes its section the browsed one.

Tab reaches the section buttons like any buttons, and ArrowDown and ArrowUp move focus between them, wrapping at the ends; Enter or Space presses the focused one. Each button shows a tooltip on hover and on focus. In the panel the page links are ordinary links, with the open one marked as the current page.

Everything. The thirteen pages are typed in SECTIONS with their path, template, status, date and owner, and nothing is published, saved or renamed. The times are measured from one fixed AS_OF. Replace the data with your site's pages and point each link at a route. The page links go to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element.

Below the medium breakpoint the sidebar is a sheet, 18rem wide, that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Both columns are in it: the rail's buttons switch the section whose pages are listed, and choosing a page closes the sheet, puts focus back on the button and shows the page behind it. The window keeps its height, and the status line says what opened.

The rail is a navigation landmark named "Pageloom sections" and the panel another, named after the browsed section. Every section button has a name that says whether it holds the open page, and a tooltip; each page link's name carries its status ("Cart, scheduled"). The heading above the pages names the section and counts them. One polite status line reports each choice, and tooltips open for keyboard focus as they do for the pointer.