Peek and Pin Icon Sidebar Block for React

The provider's open is driven by the block: open while the rail is pinned or peeking. The Sidebar keeps a "gap" element that holds the rail's width in the layout, and the panel itself is an absolutely positioned box over it. While the rail is not pinned, one class on the provider, [&_[data-slot=sidebar-gap]]:w-(--sidebar-width-icon)!, keeps the gap at the icon width even though the panel grows to 16rem, so it lies over the page instead of pushing it. Pinning drops that class, the gap grows with a short width transition and the page makes room. A shadow marks the panel while it only peeks.

So that the pointer passing over the rail on its way to the page doesn't flash the panel open. The rail opens 120 ms after the pointer or focus arrives, and closes 100 ms after both are gone. Focus counts like the pointer: Tab into the rail and the panel opens with the labels and the pin, and Tab out and it closes. Escape closes it from anywhere in the window and keeps it closed until you leave the rail and come back; the icons keep their tooltips in the meantime. On a touch screen below the medium breakpoint the rail is a sheet, so none of this runs.

Both do the same thing: the Sidebar's open state follows the pin. The pin sits in the panel's header, where the peek shows it, and says "Keep sidebar open" as a toggle button; the menu button in the top bar is the catalog trigger, which also opens the sheet on a phone. Unpinning returns to the icons and the peek. The status line at the foot says which of the two states you are in.

Everything. The five lists are typed in PLACES at the top of the file, the counts and the dots come from them, and the times are measured from one fixed AS_OF, so nothing depends on the clock. Replace PLACES with your data. The destinations are links to # whose handler shows the list 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 that the menu button opens from the start edge, the right in a right-to-left layout. Choosing a destination closes it and puts focus back on the button. There is no peek and no pin there, since the sheet is already as wide as the labelled panel. The window keeps its height, and the status line says which list is open and how many items it holds.

The rail is a navigation landmark named after the product, and the open destination is marked as the current page. Each link's name says what is new in it ("Inbox, 2 new") even while only its icon shows, and a tooltip repeats it. The peek opens for keyboard focus as it does for the pointer, Escape closes it, and the pin is reachable by Tab once the panel is open. The panel's transitions stop under reduced motion. One polite status line reports the pin, a closed peek and each destination.