feat(web): mobile drawer adopts grouped <NavSections> #1021

Closed
opened 2026-05-09 18:18:25 +00:00 by claude-desktop · 3 comments
Collaborator

As an operator on mobile,
I want the existing left-slide nav drawer to mirror the desktop sidebar's grouped structure,
so that the mental model is identical across breakpoints and I can find any route in either surface without re-learning.

Acceptance criteria

Drawer body

  • Existing <Drawer> in apps/web/src/components/app-shell.tsx (around line 302-344) keeps its hamburger trigger, user card, version footer.
  • Body content swaps the flat NAV_ITEMS.map for <NavSections variant="drawer" /> (#nav-v2-4).
  • Section headings (<h2>) stay visible on mobile.
  • Footer of drawer adds a "Keyboard shortcuts" button (opens #nav-v2-8 dialog) — replaces the ? key trigger that mobile keyboards don't easily produce.

Behavioural

  • Tapping a nav item closes the drawer (preserves current behaviour).
  • Settings stays in the drawer (preserves SAM-1 / #802 behaviour).
  • Drawer focus trap + Esc + focus return preserved (already baked into <Drawer>).

Tests

  • Drawer renders the same section structure as desktop sidebar.
  • Tap on section item closes drawer + navigates.
  • Keyboard shortcuts button opens the overlay (smoke).

Out of scope

  • Bottom-bar mobile nav.
  • Adding extra mobile-only entries.
  • Changing the hamburger trigger position.

References

  • Spec: docs/specs/nav-consolidation.md § Mobile.
  • Current drawer: apps/web/src/components/app-shell.tsx:302-344.
**As an** operator on mobile, **I want** the existing left-slide nav drawer to mirror the desktop sidebar's grouped structure, **so that** the mental model is identical across breakpoints and I can find any route in either surface without re-learning. ## Acceptance criteria ### Drawer body - [ ] Existing `<Drawer>` in `apps/web/src/components/app-shell.tsx` (around line 302-344) keeps its hamburger trigger, user card, version footer. - [ ] Body content swaps the flat `NAV_ITEMS.map` for `<NavSections variant="drawer" />` (#nav-v2-4). - [ ] Section headings (`<h2>`) stay visible on mobile. - [ ] Footer of drawer adds a "Keyboard shortcuts" button (opens #nav-v2-8 dialog) — replaces the `?` key trigger that mobile keyboards don't easily produce. ### Behavioural - [ ] Tapping a nav item closes the drawer (preserves current behaviour). - [ ] Settings stays in the drawer (preserves SAM-1 / #802 behaviour). - [ ] Drawer focus trap + Esc + focus return preserved (already baked into `<Drawer>`). ### Tests - [ ] Drawer renders the same section structure as desktop sidebar. - [ ] Tap on section item closes drawer + navigates. - [ ] Keyboard shortcuts button opens the overlay (smoke). ## Out of scope - Bottom-bar mobile nav. - Adding extra mobile-only entries. - Changing the hamburger trigger position. ## References - Spec: `docs/specs/nav-consolidation.md` § Mobile. - Current drawer: `apps/web/src/components/app-shell.tsx:302-344`.
claude-desktop added this to the nav-v2 milestone 2026-05-09 18:18:25 +00:00
Collaborator

🧹 janitor: this ticket has been idle-assigned since 2026-05-10T12:30:07.000Z. Re-dispatching.

🧹 janitor: this ticket has been idle-assigned since 2026-05-10T12:30:07.000Z. Re-dispatching.
Collaborator

🧹 janitor: this ticket has been idle-assigned since 2026-05-10T13:02:12.000Z. Re-dispatching.

🧹 janitor: this ticket has been idle-assigned since 2026-05-10T13:02:12.000Z. Re-dispatching.
Collaborator

🛑 implement skill misrouted — this issue has PR #1043 awaiting review changes; operator should re-dispatch address-review

🛑 implement skill misrouted — this issue has PR #1043 awaiting review changes; operator should re-dispatch address-review
Sign in to join this conversation.
No milestone
No project
No assignees
3 participants
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#1021
No description provided.