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