feat(web): sidebar collapse / icon-only mode + persistence

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#1024

claude-desktop commented

2026-05-09 18:18:26 +00:00

Collaborator

As an operator who works in a dense layout,
I want the sidebar to collapse to an icon-only rail with a keyboard shortcut and a persistent state,
so that I can reclaim horizontal space when working on the board or workspace and not lose nav access.

Acceptance criteria

Toggle

Collapse button in sidebar footer using lucide PanelLeftClose (expanded) / PanelLeftOpen (collapsed).
Button: <button aria-pressed={collapsed} aria-label="Collapse navigation">.
Keyboard shortcut [ toggles collapse (registered in #nav-v2-3 registry).

Visual

Expanded width 240 px → collapsed width 56 px.
transition-[width] duration-150 motion-reduce:transition-none.
Collapsed: section <h2> headings replaced by <hr role="separator" aria-label="<group label>">.
Collapsed: each item shows icon only, centred in h-10 w-10 (≥ 40 × 40 tap target).
Active item indicator: 4 px left-edge bar in accent colour (location cue when label is hidden).
Brand area shrinks to logo glyph only when collapsed.

Tooltips

Each collapsed item wraps Base UI <Tooltip> (@base-ui-components/react); 500 ms delay; side="right".
Tooltip popup styled rounded-compact bg-bg-elevated px-2 py-1 text-meta shadow-lifted.
aria-label on link carries item name (so screen readers announce it; tooltip is sighted-only sugar).
Replace existing native title= attributes on board-card.tsx StatusStripe with the same <Tooltip> primitive in this PR (one tooltip pattern across the app).

Persistence

State persisted to localStorage('nav.collapsed').
First-paint: inline <script> in apps/web/index.html reads the key and sets <html data-nav="collapsed"> before React hydration (mirror existing theme-toggle pattern). Sidebar reads the data attribute on mount.
No layout shift on first paint.

Tests

Toggle button click + [ key both flip state.
State survives reload.
Tooltips appear on collapsed-rail focus / hover.
Reduced-motion preference disables the width transition.

Out of scope

Collapsing to zero (full hide); the rail always shows icons.
Per-section disclosure (aria-expanded).
Sync across devices.

References

Spec: docs/specs/nav-consolidation.md § Collapse / icon-only mode, § Risks (decisions).

**As an** operator who works in a dense layout, **I want** the sidebar to collapse to an icon-only rail with a keyboard shortcut and a persistent state, **so that** I can reclaim horizontal space when working on the board or workspace and not lose nav access. ## Acceptance criteria ### Toggle - [ ] Collapse button in sidebar footer using lucide `PanelLeftClose` (expanded) / `PanelLeftOpen` (collapsed). - [ ] Button: `<button aria-pressed={collapsed} aria-label="Collapse navigation">`. - [ ] Keyboard shortcut `[` toggles collapse (registered in #nav-v2-3 registry). ### Visual - [ ] Expanded width 240 px → collapsed width 56 px. - [ ] `transition-[width] duration-150 motion-reduce:transition-none`. - [ ] Collapsed: section `<h2>` headings replaced by `<hr role="separator" aria-label="<group label>">`. - [ ] Collapsed: each item shows icon only, centred in `h-10 w-10` (≥ 40 × 40 tap target). - [ ] Active item indicator: 4 px left-edge bar in accent colour (location cue when label is hidden). - [ ] Brand area shrinks to logo glyph only when collapsed. ### Tooltips - [ ] Each collapsed item wraps Base UI `<Tooltip>` (`@base-ui-components/react`); 500 ms delay; `side="right"`. - [ ] Tooltip popup styled `rounded-compact bg-bg-elevated px-2 py-1 text-meta shadow-lifted`. - [ ] `aria-label` on link carries item name (so screen readers announce it; tooltip is sighted-only sugar). - [ ] Replace existing native `title=` attributes on `board-card.tsx` `StatusStripe` with the same `<Tooltip>` primitive in this PR (one tooltip pattern across the app). ### Persistence - [ ] State persisted to `localStorage('nav.collapsed')`. - [ ] First-paint: inline `<script>` in `apps/web/index.html` reads the key and sets `<html data-nav="collapsed">` before React hydration (mirror existing theme-toggle pattern). Sidebar reads the data attribute on mount. - [ ] No layout shift on first paint. ### Tests - [ ] Toggle button click + `[` key both flip state. - [ ] State survives reload. - [ ] Tooltips appear on collapsed-rail focus / hover. - [ ] Reduced-motion preference disables the width transition. ## Out of scope - Collapsing to zero (full hide); the rail always shows icons. - Per-section disclosure (`aria-expanded`). - Sync across devices. ## References - Spec: `docs/specs/nav-consolidation.md` § Collapse / icon-only mode, § Risks (decisions).

claude-desktop added this to the nav-v2 milestone

claude-desktop added the

labels

code-lead was assigned by architect

2026-05-10 12:28:09 +00:00

code-lead referenced this issue from a commit

2026-05-10 12:47:18 +00:00

feat(web): sidebar collapse / icon-only mode + persistence (#1024)

code-lead referenced this issue from a pull request that will close it,

2026-05-10 12:47:29 +00:00

feat(web): sidebar collapse / icon-only mode + persistence (#1024) #1044

charles closed this issue