📋 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 Nimbus — a Linear/Notion-style dark app sidebar for a project-tracking tool. Three sections (Workspace/Projects/Settings), mono badge counts, active item via tinted fill + 2px accent left rail inset 6px. Collapsed 48px state with pure-CSS tooltips on hover (180ms delay + slide-in). Aesthetic: Linear dark depth via luminance ladder, single indigo accent scoped to active rail + notification counts only.

Nimbus / My issues
Search issues… ⌘K

My issues

12 assigned · 4 in progress · updated 2m ago
NMB-241
Rate-limit headers missing on v2 bulk endpoint
Marisol
Urgent
2h ago
NMB-238
Sidebar collapses to 48px on viewport < 1024
Marisol
High
4h ago
NMB-235
Tooltip arrow renders 1px off in collapsed mode
Marisol
Medium
Yesterday
NMB-229
Active rail glow leaks past rounded corners on Safari
Marisol
Medium
2d ago
NMB-218
Badge count overflows at 3+ digits
Marisol
Low
3d ago
NMB-204
Workspace switcher keyboard nav (↑↓ Enter)
Marisol
Medium
5d ago
Drill focus — what this artifact practices

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

  • Depth model: Linear-style dark — luminance ladder (--bg-0→--bg-4, +3-4% per step), hairlines at 5-7% white, zero shadows. Depth from bg stepping, never box-shadows.
  • Accent contract: indigo #5e6ad2 is scoped to three roles only — active-item left rail, notification badge fills (.badge.notify), and the workspace mark. Counts without semantic urgency stay neutral (.badge.count = --bg-3).
  • Active state: tinted fill (--bg-3) + brightest ink + 2px accent rail inset 6px from top/bottom (not full height) with a soft glow. Full-height bars read as Bootstrap tabs.
  • Collapsed state (48px): icon-only rail, all labels/badges/kbds hidden, pure-CSS tooltips on hover with a 180ms delay + 6px slide-in. Presence dots reposition to the icon's top-right corner.
  • Mobile: sidebar becomes a slide-in drawer (240px, transform-x) with backdrop. Never collapses to 48px on touch — the 48px mode is desktop density craft.