biohazard-vfx/docs/stories/1.2.global-layout-sidebar-nav-command-palette.md

Status

Approved

Story

As a user, I want clear global navigation and a command palette, so that I can find Projects, Process, Studio, and Contact quickly.

Acceptance Criteria

1. Sidebar navigation (persistent 240px; not collapsible) groups routes as defined.
2. Command palette opens via Cmd/Ctrl+K with navigation to key routes.
3. Footer includes minimal links; responsive behavior verified.

Tasks / Subtasks

• Implement Global Sidebar (AC: 1)
  • Create src/components/GlobalSidebar.tsx with fixed left sidebar width 240px; not collapsible
  • Nav groups: Projects, Process, Studio, Contact; include sublinks only for existing pages to avoid 404s
  • Active route highlighting using usePathname(); keyboard focus states visible
  • Add brand/title area and optional small logo at top; keep minimal
  • Ensure Admin routes continue to use existing AdminSidebar and hide GlobalSidebar on /admin/*
• Integrate Sidebar into Layout (AC: 1, 3)
  • Update src/app/layout.tsx to render GlobalSidebar on public routes
  • Wrap page content in a container with padding-left: 240px (md+) to account for fixed sidebar
  • Keep Footer rendered; verify layout rhythm with tokens
  • Remove or disable Navigation pill nav on public routes (it is redundant with sidebar)
• Implement Command Palette — minimal, no new deps (AC: 2)
  • Create src/components/CommandPalette.tsx as a lightweight overlay using React state and tokenized styles (no new dependency)
  • Register global hotkey Cmd/Ctrl+K to toggle; ESC closes; use focus trap with native techniques and ARIA attributes
  • Commands: navigate to top-level routes and key admin entry (if authenticated)
  • Fuzzy filter: simple case-insensitive includes across labels and paths (acceptable MVP)
  • Mount globally via src/components/Providers.tsx or src/app/layout.tsx
• Responsive and A11y
  • On small screens, layout stacks with sidebar appearing as a static top section or off-canvas; no collapse control required
  • Ensure keyboard navigation order is logical: body → sidebar → content → footer; visible focus rings
  • No layout shift > 0.1 CLS when interacting with palette
• Regression and quality checks
  • Lint passes: npm run lint
  • Build passes: npm run build
  • Deep links to existing /projects/[id] still resolve (IV1)
  • Keyboard navigation and focus order preserved (IV2)
  • No CLS > 0.1 on nav open/close; document evidence (IV3)

Dev Notes

• Context
  • PRD Story 1.2 acceptance confirmed; sidebar must not be collapsible.
  • Keep Admin area behavior: Navigation currently hides on /admin/*; Admin uses AdminSidebar.
• Relevant Source Tree
  • Layout: src/app/layout.tsx:1 — renders Navigation, Footer, and <Providers />.
  • Navigation: src/components/Navigation.tsx:1 — floating pill nav (to be replaced on public routes).
  • Admin Sidebar: src/components/Navigation.tsx (export AdminSidebar) — serves as reference for sidebar styles/structure.
  • Providers: src/components/Providers.tsx — global context location; suitable to mount command palette provider if needed.
• Implementation Guidance
  • Sidebar width constant: 240px; token-friendly classes using Tailwind spacing if desired.
  • Use existing surface/text token classes (e.g., bg-surface-900, text-text-muted).
  • Command Palette: if no command component installed, prefer cmdk or @radix-ui/react-dialog + custom list; keep dependency minimal. Confirm with PO before adding new deps if needed.
  • Ensure Navigation pill nav is removed/hidden to avoid duplicate nav elements.

Testing

• Manual
  • Verify sidebar present on /, /projects, /faq, /contact and not present on /admin/*.
  • Keyboard: Tab through sidebar links and palette; ESC closes palette; Cmd/Ctrl+K toggles.
  • Mobile: No broken layout; sidebar not required to collapse but must not obstruct content.
• Metrics
  • CLS during palette interaction ≤ 0.1.
  • Build artifacts show no significant increase; note any added dependency and size impact.

Change Log

Date	Version	Description	Author
2025-09-24	v1	Initial draft from PRD Story 1.2	Scrum Master

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Debug Log References

Completion Notes List

File List

QA Results