Tooltip Menu Sidebar Block for React

A tooltip holds one line of text and can't be reached by keyboard, and a hover card's content can't be tabbed to either, so neither can carry links. This card is a plain navigation block the page draws beside the rail, absolutely positioned at the icon's height, and placed in the document right after the rail, so it sits in the tab order. It opens 90 ms after the pointer or focus arrives, moves at once from one icon to the next, and closes 160 ms after the pointer has left both the icon and the card, so crossing the small gap between them doesn't close it.

Focus an icon to open its card. ArrowRight (ArrowLeft in a right-to-left layout) moves focus into the card's first link; ArrowDown and ArrowUp move through the links and wrap, Home and End jump to the first and last, and the opposite arrow or Escape closes the card with focus back on the icon. Enter on an icon opens the section's first link. Escape works from anywhere while a card is open, in the capture phase, so it isn't swallowed by another popup.

The cards stop: unfolded, every section shows its links as an ordinary sub-menu under its label, so nothing needs a card. The same links, counts and names serve the unfolded rail and the sheet on a phone. The block starts folded, with defaultOpen={false}, and the provider is set with persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on.

Everything. The fourteen messages are typed in MESSAGES, each link shows the messages one small rule picks, and the counts and the unread dots come from the same list. Replace it with your data and keep one rule per link. Nothing is sent, received or marked read. The icons are links to # whose handler shows the section's first list instead of navigating. They're SidebarMenuButtons with render set to an a element.

Below the medium breakpoint the sidebar is a sheet that the menu button opens from the start edge, the right in a right-to-left layout, with each section's links listed under it. Choosing one closes the sheet and puts focus back on the button; there is no hover on a phone, so the cards never open. The window keeps its height, and the status line says which list opened and how many messages it holds.

Each icon is a link named after its section and says whether its card is open. The card is a navigation block named after the section, each link's name carries its count ("Unread, 3 messages"), and the open list is marked as the current page. The top bar's heading names the path, with a decorative divider between the section and the link. One polite status line reports each choice, and the card's fade stops under reduced motion.