📋 What was this drill?

Drill: Sidebar nav: collapsible sidebar with 3 sections, badges, icons+labels, collapsed tooltips, active state. Must work at 240px and 48px widths.

Interpretation: Built as Relay, a podcast listening app (fresh domain). Light Linear/Vercel surface, single warm vermilion accent reserved for playback + active nav; active state = 8% tint + 3px left rail + accent icon, count badges collapse to accent dots with hover tooltips in 48px rail mode. At ≤640px the rail becomes the permanent mobile nav — the collapsed state IS the mobile pattern.

Listen / Home
Search shows and episodes ⌘K

Good morning, Mara

You're 24 minutes from finishing The Long Build — right where you left off Tuesday.

The Long Build · Ep 47
Bridges that outlived their blueprints
58 min · interviewed by June Okafor · Tuesday
24:18 / 39:05

Up next

3 queued
What the fog knows about shipping lanes
Harbor Notes · Ep 112
34 min
A field guide to slow failures
Systems at Rest · Ep 09
41 min
The cartography of disagreement
Margins · Ep 210
27 min

Your shows

6 followed
The Long Build
2 new · weekly
Harbor Notes
1 new · twice monthly
Systems at Rest
up to date · monthly
Margins
4 new · weekly
Grain & Static
up to date · seasonal
Night Shift Radio
up to date · weekly
Sidebar drill — craft decisions Expanded 240px ⇄ collapsed 48px icon rail (same component, one class toggle). Active state = 8% tint + 3px left rail + accent icon — visible at both widths. Count badges (ink, neutral) collapse to 6px dots on the icon; hover tooltips appear in rail mode only. Vermilion accent reserved for playback + active nav. Uppercase tracked section labels become hairline dividers at 48px. Icons: 16px inline SVG, stroke 2.