Search Header Sidebar Block for Vue

Recent and Suggested. Recent holds up to three pages opened from search, newest first; choosing one moves it to the top, and a fourth pushes the oldest out. Suggested is up to four fixed picks that are not already in Recent. Opening a page from the sidebar does not change Recent, only search does.

Highlight it with the arrow keys and press Shift with Delete. The small button in the row is for the mouse and has no tab stop, so the list stays one arrow-key sequence; the status line says what was removed. The Clear recent pages action empties the group in one go.

While you type, the first match is highlighted, so Enter opens it. Matching reads the page name and its group, ignoring case and accents. Actions appear when their name matches: Toggle sidebar folds or opens the rail, and Clear recent pages empties Recent. Escape closes the popup.

A capture listener on the window's own element focuses the field when you press / and focus is inside the window but not in a text field. Nothing outside the window hears it, so it never takes the key from the page around it. The field carries aria-keyshortcuts and a visible hint that hides while you type.

Everything. The pages, the suggestions and the recents are typed in the file; nothing is searched on a server or saved, and a reload starts over. To make it real, replace the matching function with your search call and store Recent per person. The pages are links to # whose handler shows the page instead of navigating.

The search lives in the top bar, not in the sidebar, so it stays outside the sheet that holds the pages on a small screen. The field shrinks to share the bar with the page title, the popup opens below it, and choosing a result updates the page and the status line.