Mega Menu Navbar Block for React

Edit MENUS at the top of the file. Each menu is a label and three groups, each group a title and three entries (a title, a one-line description, an icon and an href). The bar's panels and the phone sheet both read it, so they never drift apart. FOOTER holds the three cells under every panel and PAGES the plain links; mark the page you're on with current: true and it gets aria-current="page", the stroke on the bar and a tint in the sheet. Keep a description to one short clause: the columns are about 240 pixels wide at the md breakpoint and a long line wraps to a third row.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, each menu button, Pricing, Sign in and Start free. 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 column is a labelled section with a heading and a list. Focus stays on the menu's button when it opens; Tab or the arrow keys move into the panel. The arrow keys also move along the bar and between the panel's links. The menus also open on hover, and the panel resizes between menus as one surface.

Below the md breakpoint the wordmark, Start free 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. Products, Resources and Company are accordion groups, closed at first and one open at a time, each holding its three headings and nine links; Pricing, Sign in and Start free sit below them. 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. The footer strip (post, changelog, status) is a desktop panel detail and isn't repeated in the sheet.

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 panel 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 free render the link they're given with render, with nativeButton={false}.

A panel is min(60rem, 100vw - 2rem) wide and opens under the bar, so it never leaves the screen. It starts under its button and shifts toward the page when there isn't room; moving between menus slides and resizes the one surface. Panels are 300 to 350 pixels tall; add a row to a group and they grow with it, so keep them under about 420 pixels.

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. 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.