Files
brain-of-reese/.agent/phases/todo/46_mobile_hamburger_nav/00_phase.md
T
ducoterra 02c76ad328 chore(agent): phase roadmap from TODO.md — 8 phases (40–47), 24 tasks
Converts the 9 TODO items into an executable phase roadmap (Protocol B,
appended after phase 39):

- 40 tuning toggle anonymous flash (TODO L3)
- 41 sync fail-fast + modal when a model is down (TODO L4)
- 42 no reply autoscroll (TODO L5)
- 43 thinking scroll back — user scroll + gated autoscroll (TODO L7)
- 44 markdown tables (TODO L6)
- 45 agent unlimited tool calls behind BOR_AGENT_MAX_ROUNDS (TODO L8)
- 46 mobile hamburger nav (TODO L9)
- 47 quadlet + jinja import formats, A9 revision (TODO L10–L11)

Each phase carries a user story, a dedicated Playwright E2E suite plan,
and owner-locked decisions (R1 A9 format extension, R2 phase-37 budget
revision, A1–A5 scope decisions) confirmed 2026-08-27.

Also records the completed phases 30–39 todo/ -> complete/ moves that
were pending in the working tree. TODO.md is cleared (items now live in
.agent/phases/todo/).
2026-08-27 18:25:53 -04:00

4.1 KiB

Phase 46 — Mobile hamburger nav

Source: TODO.md L9 — "The navbar on mobile is way too squished. Make it a hamburger dropdown menu with a nice animation" Story: .agent/user_stories/mobile-hamburger-nav.md Context: The shared bar (phase 19/34 — the same header block on all six pages) carries brand + up to four text nav pills (Chat, #nav-sources, #nav-git-sources, #nav-tuning — the latter three ship hidden, revealed for admin by header.js) + four action controls (steering toggle, #sync-btn, #new-chat-btn, sign in/out). At ≤640px the phase-34/35 squeeze rules (0.72rem pills, 0.05rem gaps) leave a bar that is squished and hard to hit. The fix: on mobile the nav links move into an animated hamburger dropdown; the action pills stay in the bar.

Objective

At ≤640px the nav links live in a #nav-toggle-opened dropdown menu (slide+fade, reduced-motion-still) with comfortable targets and the same auth visibility; at >640px the bar is byte-identical to today.

Dependencies

  • 45_agent_unlimited_tools (todo) — sequential only (no shared files).
  • 34_consistent_navbar / 35_git_sources_admin (complete) — the six-page bar contract, the admin-only link reveal, and the mobile squeeze rules being superseded.
  • 07_story_responsive_polish (complete) — the ≤640px conventions (44px targets, safe areas).

Tasks

  1. 01_hamburger_markup_all_pages.md — #nav-toggle + id="app-nav" on all six pages; the mobile CSS (dropdown, animation, reduced-motion).
  2. 02_toggle_behavior.md — header.js open/close behavior (aria, Esc, link-close, resize-close) + source pins.
  3. 03_hamburger_e2e_and_commit.md — story E2E suite (mobile + desktop + reduced motion) + regressions + commit.

Testing & Quality

  • Unit: new tests/unit/test_hamburger_nav.py — #nav-toggle (with aria-controls="app-nav", aria-expanded, aria-label="Menu") present in all six pages and absent-visible on desktop (CSS display: none outside the media query); <nav class="app-nav" id="app-nav"> in all six; the mobile CSS block carries the dropdown rules + .is-open state + the 180ms transition + the reduced-motion override; the old nav-pill squeeze rules are gone/superseded; header.js carries the toggle binding (click, Esc, delegated link close, matchMedia close).
  • Coverage: frontend-only — app/ TOTAL unchanged, >90%.
  • E2E (mandatory, A16): tests/e2e/test_mobile_hamburger_nav.py, run in isolation.

Completion Criteria

  • 375px: hamburger visible (44px target), inline nav hidden, no horizontal bar overflow; menu opens with animation, closes via link/Esc/outside; anonymous sees only "Chat" in the menu, admin sees all four links.
  • reducedMotion: "reduce": no transition, open/close still instant and correct.
  • >640px: no hamburger, inline pills exactly as today (phase-34/35 contract intact).
  • uv run pytest green; coverage TOTAL unchanged.
  • uv run pytest tests/e2e/test_mobile_hamburger_nav.py -v --no-cov green in isolation (DB up).
  • Regression E2E suites green in isolation: test_nav_consistency.py, test_header_consistency.py, test_shared_header.py, test_responsive_polish.py, test_tuning_nav_link.py.
  • uv run ruff check . && uv run pyright clean.
  • UI Structure Check (AGENTS.md rule 5): the toggle is a labeled 44px button with aria-expanded/aria-controls; the menu keeps nav aria-label="Primary"; focus-visible on the new control; contrast ≥4.5:1; no CDN.
  • One --no-gpg-sign commit; phase dir moved to .agent/phases/complete/.

Locked decisions

  • Owner-locked (2026-08-27, roadmap A5): nav links only in the menu; action pills stay in the bar; slide-down + fade 180ms; prefers-reduced-motion stills it; the existing ≤640px breakpoint (no new one).
  • A11 untouched — no new assets/CDN; the menu reuses the existing <nav> element (no duplicated links, so the whoami reveal keeps working unchanged).
  • Phase-34 contract kept — the same bar on every page; the auth visibility rules apply inside the menu exactly as before.
  • A16/A17 honoured — one story E2E suite, one atomic commit.