Editorial Category Menus Navbar Block for React

Edit CATEGORIES at the top of the file. A category has an id, a label and three pieces, each a title, a number of minutes (shown as 14 min, kept together in right-to-left pages) and an href. The panels and the sheet read the same data, so they never drift apart. Keep a title to about two lines at 320 pixels: the badge sits beside it and never shrinks. If a category has more than three pieces, add the fourth to the data and the panel grows; keep it under about 420 pixels.

Each category is its own menu, and a small panel reads best right under what opened it, so each panel is anchored to its trigger. One panel follows the pointer from button to button, sliding and resizing as it goes; each category still shows its own three pieces.

The links sit in a nav landmark named Main, after the masthead (a link home). Tab reaches the masthead, the five category buttons and Subscribe. Enter or Space opens a menu, its button says whether it is expanded, and Escape closes it and puts focus back on its button. Each panel's pieces and its All stories link are a plain list of links. Focus stays on the category button when it opens; Tab or the arrow keys move into the panel. The arrow keys also move along the bar. The menus also open on hover.

Below the lg breakpoint (five categories need the width) the masthead, Subscribe and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu 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. The categories are accordion groups, closed at first and one open at a time, each holding its three pieces with their reading times and an All stories link; Subscribe sits below, full width. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button. A sheet taller than the screen scrolls.

Yes, in the panels and in the sheet, so a client-side route change that keeps the navbar mounted doesn't leave a menu open over the new page. Each link takes closeOnClick. The sheet's open state is held in the block too (sheetOpen), and each of its links closes it. Every link points at #: point them at your pages. Subscribe renders the link it's given with render, with nativeButton={false}.

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. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the menus still open under it. With reduced motion the panels and the sheet appear without their fades and slides.