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