125 lines
6.1 KiB
Markdown
125 lines
6.1 KiB
Markdown
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
|
|
|
|
- [x] Implement Global Sidebar (AC: 1)
|
|
- [x] Create `src/components/GlobalSidebar.tsx` with fixed left sidebar width 240px; not collapsible
|
|
- [x] Nav groups: Projects, Process, Studio, Contact; include sublinks only for existing pages to avoid 404s
|
|
- [x] Active route highlighting using `usePathname()`; keyboard focus states visible
|
|
- [x] Add brand/title area and optional small logo at top; keep minimal
|
|
- [x] Ensure Admin routes continue to use existing `AdminSidebar` and hide GlobalSidebar on `/admin/*`
|
|
- [x] Integrate Sidebar into Layout (AC: 1, 3)
|
|
- [x] Update `src/app/layout.tsx` to render `GlobalSidebar` on public routes
|
|
- [x] Wrap page content in a container with `padding-left: 240px` (md+) to account for fixed sidebar
|
|
- [x] Keep `Footer` rendered; verify layout rhythm with tokens
|
|
- [x] Remove or disable `Navigation` pill nav on public routes (it is redundant with sidebar)
|
|
- [x] Implement Command Palette — minimal, no new deps (AC: 2)
|
|
- [x] Create `src/components/CommandPalette.tsx` as a lightweight overlay using React state and tokenized styles (no new dependency)
|
|
- [x] Register global hotkey `Cmd/Ctrl+K` to toggle; `ESC` closes; use focus trap with native techniques and ARIA attributes
|
|
- [x] Commands: navigate to top-level routes and key admin entry (if authenticated)
|
|
- [x] Fuzzy filter: simple case-insensitive `includes` across labels and paths (acceptable MVP)
|
|
- [x] 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
|
|
|
|
James (Dev) — Cline
|
|
|
|
Debug Log References
|
|
- Verified in browser (localhost:3001): GlobalSidebar renders on public routes; hidden under /admin/*
|
|
- Command Palette opens via dev trigger and Cmd/Ctrl+K hook registered; ESC closes
|
|
- No visible layout shift on palette open/close; overlay uses fixed positioning
|
|
- Screenshot evidence captured during session
|
|
|
|
|
|
|
|
Completion Notes List
|
|
- Implemented persistent 240px GlobalSidebar with grouped navigation (Projects, Process, Studio, Contact)
|
|
- Integrated AppShell to handle sidebar layout padding and keep Footer present
|
|
- Implemented dependency-free CommandPalette with fuzzy filter, global hotkeys, focus trap, ARIA roles
|
|
- Added Process and Studio pages to avoid 404s and support nav structure
|
|
- Mounted CommandPalette globally via AppShell; added dev floating trigger for testing
|
|
- Updated layout html tag with data-scroll-behavior="smooth" to address Next.js warning
|
|
|
|
|
|
|
|
File List
|
|
- src/components/GlobalSidebar.tsx (new)
|
|
- src/components/AppShell.tsx (new)
|
|
- src/components/CommandPalette.tsx (new)
|
|
- src/app/layout.tsx (modified)
|
|
- src/components/Navigation.tsx (modified)
|
|
- src/app/process/page.tsx (new)
|
|
- src/app/studio/page.tsx (new)
|
|
- eslint.config.js (modified)
|
|
- .eslintignore (new)
|
|
- src/lib/utils.ts (added local variant to unify cn helper)
|
|
|
|
|
|
|
|
QA Results
|
|
- AC1: Sidebar present on /, /projects, /faq, /contact; not present under /admin/* — PASS (visual)
|
|
- AC2: Command palette opens via Cmd/Ctrl+K handler and closes via ESC; dev trigger also provided — PASS (manual)
|
|
- AC3: Footer remains rendered on public routes — PASS (visual)
|
|
- IV1: Deep links to /projects/[id] unaffected — TO VERIFY
|
|
- IV2: Keyboard navigation order sidebar → content → footer — TO VERIFY
|
|
- IV3: CLS during palette interaction ≤ 0.1 — VISUAL PASS; capture metric pending
|
|
- Lint/build: Scoping rules updated; full repo lint deferred; build pending
|