Offcanvas Sidebar Block for React

collapsible="icon" shrinks the rail to a strip of icons with tooltips; collapsible="offcanvas" moves the whole rail out of the window and keeps no strip at all, only the menu button in the page's top bar and the thin rail along the edge. Offcanvas gives the page the most room and is the right choice when the navigation is something you reach for, not something you watch. The measure readout in this block is there to show what the room is for: the line length cap moves from 62 to 78 characters, with a short transition that stops under reduced motion.

The provider's own shortcut is off (shortcut={false}), because it listens on the whole page and a docs page that holds this block needs the keys for itself. Instead, the block adds a capture listener to the window's own element, so the keys work only while focus is inside the window, and they toggle the rail through useSidebar().toggleSidebar(). The key caps read ⌘ B on Apple devices and Ctrl B everywhere else, swapped in after the page loads. For a full-page app, remove both props from the provider and the catalog's page-wide shortcut comes back.

It's the cap on the article's line length: max-w-[62ch] while the rail is open and max-w-[78ch] once it isn't, where one ch is the width of a zero in the page's font. A line never runs longer than that, and on a narrow window it is shorter, so the readout says "up to". It reads the rail's state from useSidebar(), the same state the status line reports, so the three always agree.

Everything. The five articles are typed in ARTICLES at the top of the file, and choosing one swaps the page's text in the block's own state; nothing is saved, synced or marked as read. Replace ARTICLES with your content and keep the same split: a link per article, one open at a time. The links go to # and a handler shows the article instead of navigating. They're SidebarMenuButtons with render set to an a element. Point them at your routes and mark the current one with isActive.

Below the medium breakpoint the sidebar is a sheet, whatever its collapsible value: the menu button opens it from the start edge, the right in a right-to-left layout, and Escape or choosing an article closes it and returns focus to the button. The slide-out and the measure are desktop behaviors, so the shortcut hint is hidden there and the article simply fills the window. The window keeps its height, and the status line at its foot says which article is open.

The rail is a navigation landmark named after the product, each shelf is named by its label, and the open article is marked as the current page; each link's name carries its reading time. When the rail slides out, its links leave the tab order and the reading order, and one polite status line says that the rail is hidden and what the page did. The article is a scrollable region you can reach with Tab, named by the page's heading. Motion is a short CSS transition that stops under reduced motion.