Files

T

ducoterra 6be692d999 feat(header): hamburger dropdown nav on mobile (owner permission)

TODO.md L9 (owner permission 2026-08-27, roadmap A5): "The navbar on
mobile is way too squished. Make it a hamburger dropdown menu with a
nice animation." At <=640px the nav links leave the bar — a 44px
#nav-toggle opens #app-nav as an animated (180ms slide+fade)
edge-to-edge dropdown with comfortable rows and the auth visibility
contract intact inside the menu; at >640px the bar is byte-identical
to pre-phase-46 (hamburger absent, inline pills as before).

- frontend/*.html (all six pages): the shared bar gains the
  #nav-toggle button (type=button, aria-expanded=false,
  aria-controls="app-nav", aria-label="Menu", aria-hidden 3-line
  SVG icon) immediately before the nav, and the nav gains
  id="app-nav" — one <nav>, no duplicated links, so the whoami reveal
  works inside the menu unchanged (phase-34 same-bar contract intact).
- frontend/assets/styles.css: .nav-toggle is display:none outside media
  queries (desktop untouched); the <=640px block adds the 44px toggle
  (+hover in the .steering-toggle:hover family, sized 20px icon), turns
  .app-nav into the dropdown (absolute top:100% edge-to-edge under the
  sticky header, surface + hairline + --shadow-lg, z-index 21 =
  header+1, closed state invisible + non-interactive with the 180ms
  opacity/transform/visibility-delayed pair, .is-open the only
  opener), and comfortable 1rem/0.75rem menu rows — superseding the
  phase-34/35 pill-squeeze rules for .nav-link/.app-nav (the 900px
  tablet block, action pills, and 58px bar height untouched). The
  reduced-motion block stills BOTH the closed and .is-open states: the
  .is-open rule (0,2,0) out-specifies a bare .app-nav (0,1,0), so the
  override must name both — verified live in Chromium (task 03).
- frontend/assets/header.js: ONE module-owned binding (import-time,
  null-safe like the sign-out binding): click toggles .is-open +
  aria-expanded in sync, a delegated nav-link click closes, Esc closes
  and refocuses the toggle, and matchMedia("(max-width: 640px)")
  change drops the state on resize back to desktop. The binding
  touches only the container — ship-hidden whoami links stay hidden.
- tests/unit/test_hamburger_nav.py (new): the markup/CSS/JS contract
  pins (six identical toggles in the shared row, desktop byte-
  identical, dropdown + .is-open + 180ms + reduced-motion rules, the
  superseded squeeze rules gone, the one-binding behavior).
- tests/e2e/test_shared_header.py: assert_shared_bar gains mobile=True
  (at <=640px the bar shows the hamburger + the closed nav; the
  per-role menu contents are pinned by the story suite).
- tests/e2e/test_mobile_hamburger_nav.py (new, story suite, 375x812):
  toggle is a visible >=44px target, menu closed (opacity 0 /
  visibility hidden), no horizontal overflow; anonymous menu shows
  exactly "Chat" (admin-only links stay hidden inside); admin menu
  shows all four links (whoami reveal inside the menu); a link click
  navigates + the arrival page ships closed; Esc closes and refocuses
  the toggle (outside click does NOT close — accepted: the locked
  close set is Esc + link + resize, no backdrop); the 180ms
  opacity/transform pair is live and reducedMotion:reduce stills both
  states with open/close still working; 1280x800 regression — toggle
  display:none, all four inline links inside the header band.

Gates: unit+integration 773 passed; app/ coverage TOTAL 99%
(unchanged — frontend-only phase); story E2E 7 passed in isolation
(mock LLM, DB up); regression suites test_nav_consistency (6) /
test_header_consistency (3) / test_shared_header (6) /
test_responsive_polish (7) / test_tuning_nav_link (4) all pass in
isolation; ruff check + pyright clean. A11 honored: no CDN, no new
assets.

Also records the 46_mobile_hamburger_nav todo/ -> complete/ move.

2026-08-28 06:07:02 -04:00

4.1 KiB

Raw Blame History

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

01_hamburger_markup_all_pages.md — #nav-toggle + id="app-nav" on all six pages; the mobile CSS (dropdown, animation, reduced-motion).
02_toggle_behavior.md — header.js open/close behavior (aria, Esc, link-close, resize-close) + source pins.
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.

4.1 KiB Raw Blame History