Editorial Category Menus Navbar Block for React Aria

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. Each panel starts under its button, and shifts toward the page only when there isn't room.

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. Opening a menu moves focus into the panel, which is a dialog: Tab cycles through its links until Escape or a click outside closes it. The menus open on click, not 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. The open menu is held in the block (open, one id at a time), and each link closes it on press. 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 a link when it has an href.

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.