Master-Detail Dropdown Navbar Block for React

Edit MENUS at the top of the file. A menu has a label and areas; an area has a title, an icon, an id, a one-line lead and three links (a title, a one-line description and an href). The panels and the sheet read the same data. Keep the number of links the same in every area: the panel's height follows its tallest pane (it has a minimum height of 18 rem), and equal panes are what keep it from resizing as you move down the list. FIRST names the area each menu shows when it opens.

The list is a vertical tab list with automatic activation: moving to an area selects it, whether by pointer, by focus or by the Up and Down arrow keys, and Home and End jump to the first and last. Tab leaves the list and lands on the pane, whose links are ordinary links. Each pane is a tab panel labelled by its area. Each menu remembers its own selection while the page lives, so Solutions keeps the audience you last looked at.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, Platform, Solutions, Pricing, Docs, Sign in and Start building. Enter or Space opens a menu, its button says whether it is expanded, and Escape closes it and puts focus back on its button. Focus stays on the menu's button when it opens; Tab moves into the list of areas and again into the pane. The arrow keys move between areas, and along the bar from a trigger. The menus also open on hover, and moving between them resizes one panel.

Below the md breakpoint the wordmark, Start building and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu button opens a sheet from the top whose header lines up with the bar. Its first view lists every area under its menu's name (Platform, Solutions) with a chevron, then Pricing and Docs. Tapping an area swaps the view in place, in the same box so the sheet doesn't change height, to a Back button named after the menu, the area's heading and line, and its three links; focus moves to Back, and Back returns to the list with focus on the row you came from. The view you left is inert, so the keyboard and screen readers only meet one at a time. Closing the sheet resets it to the list. Sign in and Start building stay at the foot of both views; Escape, the close button or choosing a link closes the sheet and focus goes back to the menu button.

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 pane 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. Sign in and Start building render the link they're 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, and the drill-down swaps without fading.