Page Tree Navbar Block for React

Edit SPACES at the top of the file. Each space is an id, a name and a children list of pages, and each page is an id and a name. The tree, the "spaces, pages" line and the width of the Browse button are all built from that list, so adding an object is enough. WRITING is the page the demo opens on; it has to be one of the pages. The names are made up. In an app, replace choose with your router's page change.

It marks that page in the tree (aria-current="page", plus weight, a muted tint and a stroke on the row's start edge) and writes its name on the Browse button. A polite live region says the page's name and then "is the current page." The panel that was open closes. On the bar, focus returns to Browse; in the sheet, it returns to the menu button. Choosing the page that's already current leaves the panel open. Choosing a space expands or collapses it; a space is not a page, so it never becomes current. Nothing is stored or sent. New page is a link to # and does not add a row: wire it to your own flow.

The links sit in a nav named Main. The wordmark is a link home. The Browse button is named "Browse, current page Writing a page" and says whether the panel is open. Enter or Space opens it and moves focus to the current page in the tree. Up and Down move between the rows that are open. The arrow along the writing direction opens a space, and the arrow against it closes one. Home and End jump to the first and last open row. Enter or Space on a page chooses it. Typing a letter jumps to the next open row whose name starts with it. Escape closes the panel and returns focus to the button. The tree is the same on every base. The panel does not trap focus, so Tab can leave it for the rest of the page. Escape still closes it.

Below the md breakpoint the bar shows the wordmark, the current page's name (it truncates) and a menu button, and nothing wraps at 320 pixels. The button says whether the menu is open and which panel it controls. It opens a sheet from the top whose header lines up with the bar, then Home, Recent and Starred, then the same tree filling the rest of the sheet (it scrolls when the list is taller than the screen), then New page. Escape, the close button, a link or a chosen page closes it, and focus goes back to the menu button.

Home, Recent and Starred are the same three entries in the bar and in the sheet, and none of them is the page the tree marks. In the sheet, choosing one closes the sheet. Every link points at #. New page renders the link it's given with render, with nativeButton={false}. The one in the sheet closes the sheet on click.

The navbar is the page's first block: its marks and rails line up with every block under it, its top rule falls on the window's top edge, and it draws no bottom border, because the next block's top rule is its bottom edge. The panel opens over the page, so the page below doesn't move. From the lg breakpoint the Browse button is as wide as the longest page name, so choosing one doesn't push the links. Between md and lg the name truncates. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header. Nothing moves on load. The panel fades in, a space opens with a short height change, the Browse chevron turns, the sheet slides down, and a band of light sweeps across New page once on hover and keyboard focus. With reduced motion the chevron turns at once, the spaces and the panel appear without the height change or the fade, the sheet appears without sliding, and the light fades in where it stands. The bar mirrors. The panel opens under the button's start edge. The wordmark is artwork and keeps its direction. Wrap the block in your direction provider (the catalog's DirectionProvider) so the popover and the sheet follow the page.