Minimal Navbar Block for React

Edit PAGES at the top of the file: each entry is a label, an href and, for the page you're on, current: true. The bar and the drawer both read it. With a router, compute current from the path in a server component or pass it in; the dot, the heavier label and aria-current="page" follow. Three links is the design: with more, use a bar that has a menu.

Nothing in the bar needs state, effects or event handlers: the links are plain anchors and the drawer owns its open state, so the file has no "use client" and ships no script of its own beyond the catalog's Drawer and Shine Button, which are client components. If you add something that needs state, add the directive.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab walks the wordmark, the three links and Get the app, and on a phone the menu button; a link takes a focus ring, and the current page is announced as the current page.

Below the md breakpoint Get the app and a menu button stay on the bar next to the wordmark, and nothing wraps at 320 pixels. The menu button opens a drawer from the bottom: a handle, a Menu title and the three links, the current page tinted with a dot. Drag it down, press Escape, tap the overlay or choose a link to close it; focus goes back to the menu button. The drawer is Base UI's, with its swipe handle; each link is the drawer's close part, rendered as a link with nativeButton={false}. Get the app renders the link it's given with render, with nativeButton={false}.

Nothing in the bar moves, so there's nothing to reduce. The drawer opens without sliding and the band of light on Get the app fades in where it stands instead of sweeping.

The navbar is the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border, because the next block's top rule is its bottom edge. To keep it in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.