Controlled State Sidebar Block for React

Passing open to the provider. It then shows exactly that value, and every attempt to change it, from the trigger, the rail or the shortcut, calls onOpenChange with the value it would like, leaving you to keep it or refuse it. This block keeps every request, which is why the log and the rail always agree; a block that refused one would see the call in the log and the rail stay where it is. Leave open out and the provider keeps the state itself, with defaultOpen for the first value.

It doesn't, from the provider: onOpenChange receives only the new value. The controls on the page and the shortcut tell the block before they ask (a short-lived note in a ref), the trigger notes itself with its onClick, and a call with no note is logged as coming from the rail, the one part that asks on its own. A note older than a second is ignored, so a stale one can't be picked up by a later call. In your app you rarely need the source; the log is here to show how the state moves.

The provider's own shortcut is off (shortcut={false}), because it listens on the whole page. The block adds a capture listener to the window's own element instead, so the keys work only while focus is inside the window, and they ask the provider like the buttons. The key caps read ⌘ B on Apple devices and Ctrl B everywhere else, swapped in after the page loads. With the provider's shortcut left on, the same keys would also call onOpenChange, from anywhere in the page.

Below the medium breakpoint the sidebar is a sheet, and the sheet's open state is internal: open doesn't reach it and onOpenChange isn't called for it, so the trigger there isn't logged. The page's controls open and close the sheet directly, label their log lines setOpenMobile, and the readout shows openMobile. If you need to react to the sheet, read openMobile from useSidebar().

Everything. The open state, the log and the page names live in the block's own state; nothing is saved, and reloading starts over. To sync the rail with something else, replace the block's useState with your source (a URL search parameter, a stored preference, a store) and keep open and onOpenChange as they are. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element.

The sidebar is a navigation landmark named after the product, and the open page is marked as the current page. The buttons and the switch are named, the switch reports its state, and the log is a named region whose empty slots are hidden from screen readers. The log doesn't announce each line on its own; one polite status line at the foot says what each call did ("Closed by the switch (call 4)"), so nothing is read twice.