Mobile-first nav redesign (Phase 10e-5)

### Lineage `plan-2026-03-08-tryout-prep` → Phase 10e → Phase 10e-5 (Mobile-first nav redesign) ### Repo `forgejo_admin/westside-app` ### User Story As Marcus (admin on his phone) I want a mobile-friendly navigation that doesn't wrap awkwardly across the screen So that I can quickly access admin tools, coach view, and player view without horizontal scrolling ### Context The current nav in `AuthStatus.svelte` is a horizontal flex bar with 5+ links for admin (Admin Panel, Teams, Coach View, Manage Users, My Player, Manage Account) plus a sign-out button. On a 390px phone viewport, this wraps across 3+ lines and looks broken. The nav needs a hamburger/drawer pattern or bottom nav bar for mobile. Phase 10e-1 and 10e-2 are COMPLETED (PR #23) — design system tokens are available in `src/app.css` as CSS custom properties. This work should use those tokens. Key design decisions: - Admin role sees: Admin Panel, Teams, Coach View, Manage Users, My Player, Manage Account - Coach role sees: Coach View, My Player, Manage Account - Player role sees: My Player, Manage Account - Unauthenticated sees: Sign In button only - Mobile-first: design for 390px first, then enhance for desktop - The nav must include user name, role badge, and sign-out — currently in the `.auth-status` section ### File Targets Files to modify: - `src/lib/components/AuthStatus.svelte` — full rewrite of nav structure. Replace horizontal link bar with hamburger menu drawer on mobile, horizontal nav on desktop. Use CSS custom properties from `app.css`. Files NOT to touch: - `src/routes/**/+page.server.js` — data fetching - `src/routes/**/+page.svelte` — page content (except removing any duplicate nav links like the `/admin` page's "Manage Users" link, if the global nav now covers it) - `src/auth.js` — auth config - `src/hooks.server.js` — middleware - `src/app.css` — design tokens are already defined. May add new tokens if needed but prefer using existing ones. - `src/app.html` — critical styles, don't touch ### Acceptance Criteria - [ ] On 390px viewport: hamburger icon visible, tapping opens a slide-out or overlay nav drawer with all role-appropriate links - [ ] On desktop (>768px): horizontal nav bar as currently exists (but cleaner) - [ ] Nav drawer shows user name, role badge, and sign-out button - [ ] Admin sees all 6 nav items, coach sees 3, player sees 2, unauthenticated sees sign-in only - [ ] Hamburger menu closes when a link is clicked or when clicking outside - [ ] No horizontal scrolling on any viewport width - [ ] Uses CSS custom properties from `app.css` — no new hardcoded hex values ### Test Expectations - [ ] Visual: hamburger visible on 390px, horizontal nav on 1024px - [ ] Interaction: tap hamburger → drawer opens, tap link → navigates + drawer closes - [ ] Role rendering: test with admin session, coach session, player session, no session - [ ] Build: `npm run build` passes - Run command: `npm run build && npm run preview` ### Constraints - Pure CSS + Svelte reactivity — no external nav libraries - Use existing design tokens from `src/app.css` - Preserve the `SignIn` and `SignOut` components from `@auth/sveltekit/components` - Keep the Keycloak "Manage Account" external link - Must work with SvelteKit SSR (no `window` references outside `onMount` or `$effect`) - Transition/animation for drawer open/close is nice-to-have, not required ### Checklist - [ ] PR opened - [ ] Tests pass (`npm run build`) - [ ] No unrelated changes - [ ] Mobile nav verified at 390px - [ ] Desktop nav verified at 1024px ### Related - `westside-basketball` — project - `plan-2026-03-08-tryout-prep` — parent plan - PR #23 (design system) — prerequisite, merged

forgejo_admin commented

2026-03-15 03:34:16 +00:00

Owner

Lineage

plan-2026-03-08-tryout-prep → Phase 10e → Phase 10e-5 (Mobile-first nav redesign)

Repo

forgejo_admin/westside-app

User Story

As Marcus (admin on his phone)
I want a mobile-friendly navigation that doesn't wrap awkwardly across the screen
So that I can quickly access admin tools, coach view, and player view without horizontal scrolling

Context

The current nav in AuthStatus.svelte is a horizontal flex bar with 5+ links for admin (Admin Panel, Teams, Coach View, Manage Users, My Player, Manage Account) plus a sign-out button. On a 390px phone viewport, this wraps across 3+ lines and looks broken. The nav needs a hamburger/drawer pattern or bottom nav bar for mobile.

Phase 10e-1 and 10e-2 are COMPLETED (PR #23) — design system tokens are available in src/app.css as CSS custom properties. This work should use those tokens.

Key design decisions:

Admin role sees: Admin Panel, Teams, Coach View, Manage Users, My Player, Manage Account
Coach role sees: Coach View, My Player, Manage Account
Player role sees: My Player, Manage Account
Unauthenticated sees: Sign In button only
Mobile-first: design for 390px first, then enhance for desktop
The nav must include user name, role badge, and sign-out — currently in the .auth-status section

File Targets

Files to modify:

src/lib/components/AuthStatus.svelte — full rewrite of nav structure. Replace horizontal link bar with hamburger menu drawer on mobile, horizontal nav on desktop. Use CSS custom properties from app.css.

Files NOT to touch:

src/routes/**/+page.server.js — data fetching
src/routes/**/+page.svelte — page content (except removing any duplicate nav links like the /admin page's "Manage Users" link, if the global nav now covers it)
src/auth.js — auth config
src/hooks.server.js — middleware
src/app.css — design tokens are already defined. May add new tokens if needed but prefer using existing ones.
src/app.html — critical styles, don't touch

Acceptance Criteria

On 390px viewport: hamburger icon visible, tapping opens a slide-out or overlay nav drawer with all role-appropriate links
On desktop (>768px): horizontal nav bar as currently exists (but cleaner)
Nav drawer shows user name, role badge, and sign-out button
Admin sees all 6 nav items, coach sees 3, player sees 2, unauthenticated sees sign-in only
Hamburger menu closes when a link is clicked or when clicking outside
No horizontal scrolling on any viewport width
Uses CSS custom properties from app.css — no new hardcoded hex values

Test Expectations

Visual: hamburger visible on 390px, horizontal nav on 1024px
Interaction: tap hamburger → drawer opens, tap link → navigates + drawer closes
Role rendering: test with admin session, coach session, player session, no session
Build: npm run build passes
Run command: npm run build && npm run preview

Constraints

Pure CSS + Svelte reactivity — no external nav libraries
Use existing design tokens from src/app.css
Preserve the SignIn and SignOut components from @auth/sveltekit/components
Keep the Keycloak "Manage Account" external link
Must work with SvelteKit SSR (no window references outside onMount or $effect)
Transition/animation for drawer open/close is nice-to-have, not required