Expandable Search Navbar Block for React

Edit RECIPES at the top of the file for the titles the count is taken over, and PAGES for the links. The block counts matches, with no accents or case, as you type; it doesn't list them, because the search that fills a page of results is yours. Wire the field to your router or your index: read query when the user presses Enter (the field sits in a search landmark, ready for a form), and replace countMatches with your own total if it comes from a server.

The links and the field are two cells of one grid. Closed, its columns are 1fr 0fr; open, 0fr 1fr, and the column widths transition, which only works because both lists use the same unit (a mix of lengths and fr would jump). Each cell clips along the inline axis, so the links are cut as the column closes, and the cell that is folded away is inert, so it can't be focused or read while it is out of sight. With reduced motion the columns swap at once.

The search button says whether the field is open (aria-expanded) and which landmark it controls (aria-controls), its name changes between "Search recipes" and "Close search", and it declares the "/" key with aria-keyshortcuts on libraries that pass it through. Opening it moves the keyboard into the field a frame later, after the field is free of inert; Escape folds it away and returns the keyboard to the button, wherever it was inside the field. The count is announced in a polite status line ("3 of 12 recipes match"), while the visible count is hidden from screen readers so it isn't read twice. The clear button is named "Clear search" and returns the keyboard to the field.

A press anywhere outside the field and its button folds the field away. The click still lands where you pressed: the keyboard goes back to the search button only if nothing else took it, so pressing Add a recipe or a link keeps the keyboard there. What you typed is kept, so opening the field again picks up where you left off.

Below the md breakpoint the bar shows the wordmark, a search button and a menu button, and nothing wraps at 320 pixels. Opening the search hides the wordmark and the menu button and gives the field the whole bar, with the button turned into a close button in the same place; Escape or that button folds it back. The menu button opens a sheet from the top whose header lines up with the bar, with the four links and Add a recipe (which leaves the bar below the sm breakpoint to make room). Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus returns to the menu button.

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. Every link points at #: point them at your pages. Add a recipe renders the link it's given with render, with nativeButton={false}.