Compact Icon Rail Sidebar Block for React

An icon rail with tooltips hides its labels until you hover or focus an icon; this one never hides them. Every destination is an icon over a short caption, so a first-time visitor can read the whole navigation at a glance, and no tooltip is needed or drawn. It trades width for that: the rail is a fixed 4.5rem column (collapsible="none" with w-18), so it doesn't fold, and it suits six to eight destinations with short names rather than a long tree.

The catalog Sidebar turns into a sheet below the medium breakpoint, but a static rail never does: collapsible="none" renders a plain column. At 72 pixels it leaves a page 248 pixels wide at 320, which holds a list of notes with truncated lines, so the navigation stays one tap away instead of behind a menu button. The block has no menu button for that reason.

The dot comes from the data: Inbox holds three typed notes, two of them marked unopened. While they are unopened the rail draws a dot on Inbox, the link's name says "Inbox, 2 new", the page's count line says "3 notes, 2 new" and the rows are bold with a dot. Opening Inbox and then going to another destination marks them seen, the status line says "Inbox read.", and the dot and the counts follow from the same state. The dot is a shape and a weight, never a color.

Tab moves through the links like any navigation. On top of that, ArrowDown and ArrowUp move focus to the next and previous destination and wrap at the ends, and Enter opens the focused one. The links are plain anchors to # whose handler shows the page instead of navigating, so they work the same with every library and need no per-library code.

Everything. The eight lists are typed in MAIN and FOOT at the top of the file, the counts and times come from them, and the times are measured from one fixed AS_OF, so nothing depends on the clock. Replace the rows with your data and point each link at a route, marking the current one with aria-current="page". Nothing is saved, synced or searched; Settings only lists values.

The rail is a navigation landmark named after the product, the open destination is marked as the current page, and each link's name carries what is new in it. The visible captions are part of that name. The icons are decorative. The page's list is a scrollable region you can reach with Tab, and one polite status line says which destination opened. The pill's transition stops under reduced motion.