Scrollable Content Sidebar Block for React

Each SidebarGroupLabel is position: sticky at the top of the scroll area with the sidebar's own background, and its group is the label's containing block, so it leaves with its group and the next label takes its place. There is no script: scrolling is the browser's, and the labels keep a hairline under them so the pages passing under read as covered.

The block listens for scroll on the document, in the capture phase, since the scroll area's events don't bubble, and keeps the ones from its own list. The group at the top is the last one whose top edge is at or above a line just under the scroller's top. At the very bottom the last group counts as at the top, even if it is too short to reach it.

Choosing a group sets the scroller's scrollTop so the group's top meets the top edge, never scrollIntoView, which would move the page around the window. A group near the end can't reach the top because the list can't scroll that far, so the block remembers where the jump left the list and keeps that group as the one at the top until you scroll away. The polite status line says the group about half a second after scrolling rests, so it isn't read out mid-scroll.

The select, the line and the labels go, and every page shows its icon with a tooltip, so the strip lists all twenty-nine pages whatever the scroll position was. The strip scrolls too. Unfolding brings the select back showing the group at the top.

Everything. The twenty-nine pages and their lines are typed in GROUPS; nothing is fetched or saved, and the block sets persist={false} and shortcut={false} so it writes no cookie. The pages are links to # whose handler shows the page 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 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. Jump to is a native select, so it opens the phone's own picker inside the sheet. Choosing a page closes the sheet and puts focus back on the button.