Card Grid Mega Menu Navbar Block for React

Edit MENUS at the top of the file. A menu has a label, six cells (a title, a one-line description, an icon and an href), a more label for the closing row, and two class strings: grid sets the panel's width and column count (grid-cols-3 or grid-cols-2), layout sets whether a cell stacks its icon over the text or puts it beside it. The panels and the sheet read the same data. A cell count that fills its rows keeps the hairlines clean: six cells fit both 3 columns and 2; an uneven count leaves an empty tile whose background is the hairline colour. PAGES holds the plain links; mark the page you're on with current: true.

The grid is gap-px bg-border and every cell is a link with the panel's own background, so the one-pixel gaps show the border colour and nothing doubles. The hover and focus tint is a solid colour on purpose: a translucent tint would let the hairline colour show through the cell. The focus ring is drawn inside the cell, where the cells around it can't cover it. The panel keeps one outer radius and clips the grid to it.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, Products, Solutions, Docs, Pricing, Sign in and Get started. 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 or the arrow keys move into the grid. The arrow keys also move along the bar. The menus also open on hover, and moving between them slides and resizes one panel.

Below the md breakpoint the wordmark, Get started 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 and Solutions are accordion groups, closed at first and one open at a time, each holding its six cells as rows (icon, title, description) and the "View all" link; Docs, Pricing, Sign in and Get started 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.

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 cell 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 Get started 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.