99 lines
4.4 KiB
Markdown
99 lines
4.4 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
|
|
|
|
- [ ] 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
|
|
|