Icon-Only Navbar Block for React

Twice: every cell holds its label as text that's folded to nothing until the toggle is on (so it's the link's accessible name at all times, in its own language), and a tooltip shows the same word on hover and keyboard focus. The wordmark cell is named Glyphrail home. The current destination has aria-current="page": it's tinted and a foreground stroke lies on the bar's bottom edge, so the mark isn't colour alone. Each tooltip trigger renders the link with render, and the tooltip is switched off with disabled while the words show.

The toggle is a pressed button (aria-pressed) whose state sits on the bar as data-labels. From md, pressing it switches the list's columns from six 3 rem tracks to six 5.25 rem tracks over 300 ms and unfolds each word beside its icon, so the cells widen and nothing else moves; the bar stays 48 pixels tall. Below md there's no room for the words, so the toggle is hidden and the six cells share the bar's width. With reduced motion the cells change width at once.

unread on a destination is its count: Messages starts at 3 and Alerts at 1. A small foreground dot sits on the icon (never a red one) and a visually hidden ", 3 unread" follows the name, so a screen reader hears "Messages, 3 unread". Opening a destination marks it current and reads what waited there, which removes its dot; the block keeps this in state, so wire your own counts in.

Edit DESTINATIONS at the top of the file: an icon, an id, a label and an optional unread each. The grid has six columns (grid-cols-6 on a phone and repeat(6, …) from sm): change the 6 in those three classes when the count changes, and check that the widened bar still fits the md width.

Tab moves through the wordmark, the six links and the toggle; each link shows its tooltip on focus, Enter follows it and Space presses the toggle. Every link points at #: point them at your routes and derive the current one from your router instead of the block's state.

The cells run from the right, the hairlines and marks follow, the toggle moves to the left end and the words unfold on the other side of their icons. Icons are artwork and keep their shape.