Scoped Record Search Navbar Block for React

Edit SCOPES for the select (each scope is an id and a label), ENTRIES for the records (a title, a one-line detail, a scope and pending) and PAGES for the links. The field, the empty state and the badge all read ENTRIES, so a new pending row shows up in the count without a second list. Mark the page you're on with current: true: that link gets aria-current="page", which draws a stroke on the bar's bottom edge. Every link points at #: point them at your pages.

The select sets the scope and the field filters that scope's records by title and detail, ignoring case and accents. The suggestions are those rows. Choosing one writes a polite line ("Opened Maya Chen. Nothing was loaded.") and does not navigate: wire openEntry to your router when a record should open. An empty query lists the whole scope. A query with no match says so, naming the scope and the query.

It flips expanded in the block and says so in a polite line the toggle names with aria-controls ("Sidebar expanded." or "Sidebar collapsed."). The button's label switches between Expand sidebar and Collapse sidebar, and aria-expanded follows. Pressing [ does the same, unless you are typing in a field, the key is held with a modifier, or the target is editable. There is no second panel in this block: the line is the whole effect, so a real app can listen for the same state and show its rail.

The toggle is a button named Expand sidebar or Collapse sidebar, with the shortcut announced. Tab then reaches the wordmark (a link home), the search field and its scope select, the pending badge's text, and the links in a nav landmark named Main. The suggestions are a listbox on the field. Escape closes the list. The [ key is ignored while a text field, including this search, has focus.

Below the lg breakpoint the links hide, and below md the field hides too. At 320 pixels the bar is the toggle, the wordmark, the pending count and a search button, and nothing wraps. The search button opens a sheet from the top with the same scoped field. Focus moves into the sheet; Escape or the close button closes it and returns focus to the search button. The badge keeps the number and hides the word "pending" below sm.

Nothing moves on load: the navbar is chrome and is simply there. The suggestion list opens with the popup's own transition, and the sheet slides down from the top. With reduced motion the sheet appears without sliding.