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.
This commit is contained in:
@@ -119,7 +119,7 @@ def _bar_selector(page_kind: str) -> str:
|
||||
return ".doc-header .app-header" if page_kind == "viewer" else ".app-header"
|
||||
|
||||
|
||||
def assert_shared_bar(page: Page, admin: bool, page_kind: str) -> None:
|
||||
def assert_shared_bar(page: Page, admin: bool, page_kind: str, mobile: bool = False) -> None:
|
||||
"""Assert the phase-19 shared-bar contract on the page the ``page``
|
||||
is already showing.
|
||||
|
||||
@@ -128,6 +128,13 @@ def assert_shared_bar(page: Page, admin: bool, page_kind: str) -> None:
|
||||
in the HTML, so "exactly one is visible" means /api/whoami resolved
|
||||
and header.js (``initSharedHeader``) did its toggle — before any
|
||||
assertion runs.
|
||||
|
||||
``mobile`` (phase 46, owner permission 2026-08-27, ``TODO.md`` L9):
|
||||
at ≤640px the nav links no longer sit inline — the bar carries the
|
||||
44px ``#nav-toggle`` hamburger and the nav ships as the CLOSED
|
||||
(invisible) dropdown. Per-role link visibility INSIDE the menu is
|
||||
pinned by ``test_mobile_hamburger_nav.py`` (phase 46, task 03); this
|
||||
helper pins the bar-level contract only.
|
||||
"""
|
||||
# Settled auth state: exactly one of Sign in / Sign out is visible
|
||||
# (phase-16 semantics, now owned by the shared module).
|
||||
@@ -147,14 +154,24 @@ def assert_shared_bar(page: Page, admin: bool, page_kind: str) -> None:
|
||||
# hidden and are revealed for admin (phase-16 UX revision, owner
|
||||
# permission 2026-08-23; the soft-gate page and the A10 API split
|
||||
# are untouched).
|
||||
expect(page.locator(".app-nav a[href='/']")).to_be_visible()
|
||||
for link_id in ("#nav-sources", "#nav-tuning"):
|
||||
nav = page.locator(link_id)
|
||||
assert nav.count() == 1, f"one {link_id} expected on the {page_kind} page"
|
||||
if admin:
|
||||
expect(nav).to_be_visible()
|
||||
else:
|
||||
expect(nav).to_be_hidden()
|
||||
#
|
||||
# Phase 46 (owner permission 2026-08-27, ``TODO.md`` L9): at ≤640px
|
||||
# the links live in the #nav-toggle dropdown instead — the bar
|
||||
# shows the hamburger and the nav is the closed (invisible +
|
||||
# non-interactive) panel; the per-role link visibility inside the
|
||||
# menu is pinned by test_mobile_hamburger_nav.py (phase 46 task 03).
|
||||
if mobile:
|
||||
expect(page.locator("#nav-toggle")).to_be_visible()
|
||||
expect(page.locator("#app-nav")).to_be_hidden()
|
||||
else:
|
||||
expect(page.locator(".app-nav a[href='/']")).to_be_visible()
|
||||
for link_id in ("#nav-sources", "#nav-tuning"):
|
||||
nav = page.locator(link_id)
|
||||
assert nav.count() == 1, f"one {link_id} expected on the {page_kind} page"
|
||||
if admin:
|
||||
expect(nav).to_be_visible()
|
||||
else:
|
||||
expect(nav).to_be_hidden()
|
||||
|
||||
if page_kind == "viewer":
|
||||
# The document itself has settled (rendered, not Loading…/not-found)
|
||||
@@ -342,6 +359,12 @@ def test_sign_out_from_viewer_returns_to_anonymous(
|
||||
# ---------------------------------------------------------------------------
|
||||
# 6. Mobile (375×812): 58px bars, no horizontal overflow, in BOTH auth
|
||||
# states — the new pills never grow the bar
|
||||
#
|
||||
# Phase 46 adaptation (owner permission 2026-08-27, ``TODO.md`` L9):
|
||||
# at ≤640px the nav links leave the bar — the hamburger (#nav-toggle)
|
||||
# is visible and the nav is the closed dropdown; the per-role link
|
||||
# visibility inside the menu is pinned by
|
||||
# test_mobile_hamburger_nav.py (phase 46, task 03).
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@@ -359,15 +382,16 @@ def test_mobile_bar_fits_and_heights_held(
|
||||
):
|
||||
page.goto(app_url + path)
|
||||
# 58px at 375px is asserted inside assert_shared_bar…
|
||||
assert_shared_bar(page, admin=admin, page_kind=kind)
|
||||
# …and the pills (icon-only at ≤640px) fit without overflow.
|
||||
assert_shared_bar(page, admin=admin, page_kind=kind, mobile=True)
|
||||
# …and the pills (icon-only at ≤640px) + the hamburger fit
|
||||
# without overflow.
|
||||
_assert_no_overflow(page, f"{kind} @375px (admin={admin})")
|
||||
|
||||
# Anonymous: the two icon pills are Sign in + New chat.
|
||||
check_all(admin=False)
|
||||
|
||||
# Signed in: Sign out + the Sources nav link join the bars — and the
|
||||
# bar never grows.
|
||||
# Signed in: Sign out joins the bars (the admin-only nav links join
|
||||
# the MENU, not the bar — phase 46) — and the bar never grows.
|
||||
login(page, app_url, next="/")
|
||||
expect(page).to_have_url(app_url + "/")
|
||||
check_all(admin=True)
|
||||
|
||||
Reference in New Issue
Block a user