# Collapsing sidebar rail > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A left-hand navigation sidebar for a dashboard-style web app. It has two widths: **open** (240px, icon + label + count badges) and **rail** (64px, icons only, labels become tooltips). A small round toggle button sits on the sidebar's outer edge; ⌘B / Ctrl+B also toggles. The width animates, labels fade and slide out slightly ahead of the width change so nothing wraps mid-transition. The active route is marked by a 2px amber bar hugging the left edge, not by a filled pill. The feeling is quiet, dense, engineered: a tool you live in for hours. ## Reference behaviour 1. Initial state: sidebar is open at 240px. First nav item ("Dashboard") is the current route. Main content shows a greeting, three stat cards and a bar chart. 2. Hover any nav link: background changes to `--panel-2`, text becomes full `--ink`. No movement. 3. Click the round toggle on the sidebar's right edge (24px, straddling the border at `right:-12px; top:66px`): the sidebar shrinks to 64px over 320ms; labels, group headings and count badges disappear (opacity 0 + 6px leftward slide over 160ms, starting immediately); the chevron inside the toggle rotates 180°. Main content expands to fill the freed space. 4. In rail state, hovering or keyboard-focusing a nav link shows a tooltip to the right of the rail: dark pill (`--ink` background, `--bg` text, 12px/500), 10px from the rail edge, with a 4px caret. It fades in and slides 4px over 160ms. 5. Pressing ⌘B (macOS) or Ctrl+B (elsewhere) toggles the state exactly like the button. 6. Click the toggle again: sidebar returns to 240px; labels fade in after the width starts growing. 7. The toggle's `aria-expanded` mirrors the state; its `title` reads "Collapse sidebar (⌘B)" or "Expand sidebar (⌘B)". 8. Hovering a bar in the chart tints it amber and shows its value in a native tooltip. ## Structure ``` 1280 × 800 ┌──────────┬────────────────────────────────────────────────────────────┐ │ brand 56 │ topbar 56 ─ breadcrumb · · · · · · · · · · · · · ⌘B hint │ │──────────┼────────────────────────────────────────────────────────────┤ │ OVERVIEW │ h1 greeting │ │ ▌Dashbrd │ subtitle │ │ Analytc │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ Deploy12│ │ stat │ │ stat │ │ stat │ │ │ MANAGE │ └──────────┘ └──────────┘ └──────────┘ │ │ Members │ ┌────────────────────────────────────────┐ │ │ Billing │ │ bar chart (48 bars) │ │ │ Settngs │ └────────────────────────────────────────┘ │ │ │ │ │ user row │ │ └──────────┴────────────────────────────────────────────────────────────┘ 240 → 64 (toggle sits at x = sidebar width − 12, y = 66) ``` - `