57 lines
1.5 KiB
YAML
57 lines
1.5 KiB
YAML
task_id: task_component_header
|
|
entity_id: component_header
|
|
workflow_version: v002
|
|
created_at: "2025-12-18T17:08:00"
|
|
status: completed
|
|
agent: frontend
|
|
|
|
entity:
|
|
type: component
|
|
name: Header
|
|
file_path: components/Header.tsx
|
|
|
|
description: |
|
|
Create the main Header component that combines logo, navigation, and user menu.
|
|
Must be responsive with mobile hamburger menu.
|
|
|
|
file_paths:
|
|
to_create:
|
|
- components/Header.tsx
|
|
|
|
reference_files:
|
|
- components/NavLink.tsx
|
|
- components/UserMenu.tsx
|
|
- app/page.tsx # For style consistency
|
|
|
|
implementation_notes: |
|
|
- Use 'use client' directive for mobile menu state
|
|
- Import NavLink and UserMenu components
|
|
- Layout:
|
|
- Left: Logo (SonicCloud) linked to /
|
|
- Center/Left: Navigation links (desktop)
|
|
- Right: UserMenu
|
|
- Mobile: Hamburger icon, dropdown menu
|
|
- Use useState for mobile menu open/close
|
|
- Background: zinc-900 or zinc-950/95 with backdrop blur
|
|
- Border bottom: zinc-800
|
|
- Fixed position at top with z-50
|
|
- Navigation links:
|
|
- Home (/)
|
|
- Search (/search)
|
|
- Playlists (/playlists)
|
|
- Upload (/upload)
|
|
- Use flex layout with justify-between
|
|
- Logo: text-2xl font-bold, gradient text (purple-500 to pink-500)
|
|
|
|
acceptance_criteria:
|
|
- Header renders with logo
|
|
- All navigation links present
|
|
- UserMenu integrated
|
|
- Mobile hamburger menu works
|
|
- Fixed at top of viewport
|
|
- Proper z-index for overlapping content
|
|
|
|
dependencies:
|
|
- component_nav_link
|
|
- component_user_menu
|