Search Overlay Navbar Block for React

Edit RESULTS at the top of the file (a title, a kind and a topic each), POPULAR for the tags and RECENT_AT_START for the searches the panel opens with. The panel filters RESULTS by title, kind and topic, ignoring case and accents. To search a real index, replace matching(query) with your own results; the list renders whatever it returns. The links in the bar and the phone sheet come from PAGES.

They are kept in the block's state, newest first, with no repeats and at most five. Pressing Enter in the field keeps what you typed, and so does choosing a result. Each row has a button that runs the search again and a separate button, named "Remove" followed by the search, that drops it; Clear all empties the list, which then says how to fill it. After each of these the keyboard goes back to the field. Nothing is saved between visits: store the list yourself if you want it to last.

The search button says whether the panel is open and, while it is, which panel it controls. Opening it moves the keyboard to the large field, the first thing in the panel; Tab moves through the field, its clear button, the close button, the rows and the tags without leaving the panel, and the Down arrow in the field jumps to the first result. Escape closes the panel and returns the keyboard to the button. The field sits in a search landmark inside a dialog named "Search Briefharbor", the count is announced in a polite status line, and the key cap is hidden from screen readers because it only hints. The "/" key opens the panel from anywhere that isn't a text field.

Each result's title is drawn with Search Highlight Text, which marks the typed letters on a light tint of the text colour, so the words keep their contrast in every theme. When nothing matches, the panel says what had no result, in a bdi so it reads right in any direction, and offers a Clear search button that empties the field and returns the keyboard to it; the popular topics stay in view.

Below the md breakpoint the search button is an icon (its accessible name is still "Search cases and statutes"), beside a menu button, and Start trial moves into the menu below the sm breakpoint. The panel is the same sheet from the top; the recents and results come first and the popular topics follow, and a sheet taller than the screen scrolls. The menu button opens a separate sheet with the four links and Start trial, its header lined up with the bar. Both sheets trap focus, close on Escape and return focus to the button that opened them.

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. The panel opens over the page, so nothing below moves. 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. Start trial renders the link it's given with render, with nativeButton={false}.