workflow_version: "v002"
feature: "add header and navigation link to each pages"
created_at: "2025-12-18T17:07:30"
status: draft
revision: 1

# No data model changes required
data_models: []

# No API endpoint changes required
api_endpoints: []

# Pages to modify (add header via layout)
pages: []

# Components to create
components:
  - id: component_header
    name: Header
    file_path: components/Header.tsx
    props:
      - name: className
        type: string
        required: false
        description: Additional CSS classes
    events: []
    uses_apis: []
    uses_components:
      - component_nav_link
      - component_user_menu
    description: |
      Global navigation header with logo, navigation links, and user menu.
      Includes responsive design with mobile hamburger menu.
    acceptance_criteria:
      - Header renders logo linked to home
      - Navigation links are displayed
      - User menu shows auth state
      - Mobile responsive with hamburger menu

  - id: component_nav_link
    name: NavLink
    file_path: components/NavLink.tsx
    props:
      - name: href
        type: string
        required: true
        description: Link destination
      - name: children
        type: React.ReactNode
        required: true
        description: Link content
      - name: icon
        type: string
        required: false
        description: Optional icon name
    events: []
    uses_apis: []
    uses_components: []
    description: |
      Styled navigation link with active state indicator.
      Highlights when on current page using usePathname().
    acceptance_criteria:
      - Shows active state when on current page
      - Hover state styling
      - Supports optional icon

  - id: component_user_menu
    name: UserMenu
    file_path: components/UserMenu.tsx
    props: []
    events: []
    uses_apis: []
    uses_components: []
    description: |
      Displays user authentication state.
      Shows Login/Register for unauthenticated users.
      Shows user avatar and dropdown for authenticated users.
    acceptance_criteria:
      - Shows Login/Register when not authenticated
      - Shows user info when authenticated
      - Links to profile and logout

# Layout modification
layout_changes:
  - id: layout_root
    file_path: app/layout.tsx
    changes:
      - Import Header component
      - Render Header before children
      - Update metadata for SonicCloud branding

# Navigation structure
navigation_config:
  links:
    - label: Home
      href: /
      icon: home
      show_always: true
    - label: Search
      href: /search
      icon: search
      show_always: true
    - label: Playlists
      href: /playlists
      icon: playlist
      auth_required: true
    - label: Upload
      href: /upload
      icon: upload
      auth_required: true

# Dependencies
dependencies:
  component_header:
    depends_on: []
    depended_by:
      - layout_root
  component_nav_link:
    depends_on: []
    depended_by:
      - component_header
  component_user_menu:
    depends_on: []
    depended_by:
      - component_header
  layout_root:
    depends_on:
      - component_header
    depended_by: []