Hover Highlight 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. Compute current from your router and the dot, the heavier label and aria-current="page" follow. Five links fit the centred column comfortably; with more, move some into a menu.

Each link reports itself on pointer enter and on focus: the block measures the link's box against the nav's (so its inline start comes out right in either text direction) and sets its offset and width. It transitions inset-inline-start, width and opacity; the first time it shows, the position changes with no transition so it appears on the link instead of travelling from the start, and when you leave it only fades. Moving between links glides.

The links sit in a nav landmark named Main, after the wordmark (a link home). Tab walks the wordmark, the five links and Get a quote; the highlight follows keyboard focus as it follows the pointer, and fades when focus leaves the list. The highlight is decorative and hidden from assistive technology; the current page is announced as the current page.

Below the md breakpoint the highlight isn't needed (there's no hover), so the links fold into a menu button beside Get a quote. It opens a drawer from the bottom: a handle, a Menu title and the same links, the current page tinted with a dot. Drag the drawer down, press Escape, tap the overlay or choose a link to close it; focus goes back to the menu button. Nothing wraps at 320 pixels. 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 a quote renders the link it's given with render, with nativeButton={false}.

With reduced motion the highlight appears, moves and disappears at once, with no transition at all, and the drawer opens without sliding. The band of light on Get a quote 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 the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.