Sticky Header Sidebar Block for React

They are the Sidebar's own SidebarHeader and SidebarFooter, which sit above and below SidebarContent, the only part that scrolls. Nothing is made sticky with CSS. The hairlines are borders that are transparent until data-on is true, so they appear without moving anything.

The scroll area's events don't bubble, so the block listens for scroll on the document in the capture phase and keeps the ones that come from this block's own list. It then reads three things from the scroller: whether it has scrolled, whether more is below and whether the seventh row has reached the top. A filter shortens the list without scrolling it, so the block looks again whenever the typed words change.

It stays in the footer's account row, hidden and out of the tab order until six rows have scrolled out of sight, or until you reach the end of a list that has scrolled a fair way (a tall phone may never get six rows away). Pressing it puts focus on the first row first, then sets the list's scroll position to zero, so keyboard focus is never lost when the button hides. It uses scrollTop, not scrollIntoView, so the page around the window never moves.

It matches the typed words against each page's name and hint, ignoring case and accents. A count under the field updates at once, and the polite status line says how many match about half a second after you stop typing, so a screen reader isn't read every letter. With no match the list gives way to a short empty state, and Clear filter returns focus to the field.

Everything. The eighteen pages and their lists are typed in SECTIONS; 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. Replace the list with 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. The header, footer, filter and Back to top button work inside it exactly as they do beside the page. Choosing a page closes the sheet and puts focus back on the button.