Floating Variant Sidebar Block for React

variant="floating" pads the rail's container by half a rem on every side and gives its inner box a radius, a border and a small shadow, so the rail reads as a card set into the window instead of a column that touches its top, bottom and edge. The window behind it is tinted here (the provider has bg-muted) so the card reads as lifted in a light theme too. The flush variant, variant="sidebar", has no padding and draws a single hairline on the edge facing the page. The segment group changes only that prop; in a real app you pick one.

Each section is a Collapsible around a SidebarMenuItem: its button toggles the sub-menu under it, with its open state in the button's aria-expanded, and the pages are SidebarMenuSubButton links. Sections start closed except the one that holds the first page, and opening one doesn't close another. When the rail is folded to icons, the sub-menus are hidden and each section is one icon with a tooltip.

Everything. The twelve docs pages are typed in SECTIONS at the top of the file, and choosing one swaps the page's text in the block's own state; nothing is fetched. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuSubButtons with an href, which every base renders as a link. 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, whatever its variant. The Floating and Flush switch is hidden there because it would change nothing you can see; the status line still says which look the desktop rail has. Escape or choosing a page closes the sheet and focus goes back to the menu button.

The menu button or the rail along the sidebar's edge folds it to a strip of section icons with tooltips, and the floating card keeps its radius and shadow. 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. For a full-page app, remove both to remember the state and get the shortcut, and give the provider your page's height instead of the window's.

The sidebar is a navigation landmark named after the product, with the sections' list named by its label and the open page marked as the current page. A section's button says whether it is expanded. The page is a scrollable region you can reach with Tab, named by its heading, and the code sample is a figure with its own caption. The Floating and Flush choice is a labeled group with arrow-key movement, and one polite status line says what changed.