Header Component

A responsive header component with navigation, user menu, and mobile support. Includes sign-in/sign-out functionality and dropdown menus.

Not Signed In

OXGN

<Header 
  onSignOut={() => console.log('Sign out clicked')}
/>

Signed In User

OXGN

<Header 
  user={{
    id: "1",
    email: "john.doe@example.com",
    name: "John Doe"
  }}
  onSignOut={handleSignOut}
/>

User With Avatar

OXGN

<Header 
  user={{
    id: "1",
    email: "sarah.smith@example.com",
    name: "Sarah Smith",
    avatar: "https://example.com/avatar.jpg"
  }}
  onSignOut={handleSignOut}
/>

With Navigation

OXGN

<Header 
  user={currentUser}
  navigation={[
    { label: "Dashboard", href: "/dashboard", active: true },
    { label: "Artists", href: "/artists" },
    { label: "Analytics", href: "/analytics" },
    { label: "Settings", href: "/settings" }
  ]}
  onSignOut={handleSignOut}
/>

Navigation With Icons

OXGN

<Header 
  user={currentUser}
  navigation={[
    { 
      label: "Home", 
      href: "/", 
      icon: <HomeIcon />,
      active: true
    },
    { 
      label: "Explore", 
      href: "/explore",
      icon: <SearchIcon />
    },
    { 
      label: "Library", 
      href: "/library",
      icon: <MusicIcon />
    }
  ]}
  onSignOut={handleSignOut}
/>

Note: Icons have been removed from the demo for compatibility. In a real application, you would import icon components and pass them as shown in the code example.

Mobile Responsive

Note: The Header component is fully responsive. On mobile devices:

Navigation items are hidden and replaced with a hamburger menu
Clicking the menu button reveals navigation in a dropdown
User menu remains accessible via the avatar/initials button

Resize your browser window to see the mobile layout in action.

Props Reference

Prop	Type	Default	Description
user	User	undefined	Current user object
onSignOut	() => void	required	Sign out callback function
navigation	NavItem[]	[]	Navigation menu items
className	string	undefined	Additional CSS classes

User Interface

interface User {
  id: string;
  email: string;
  name?: string;
  avatar?: string;
}

NavItem Interface

interface NavItem {
  label: string;
  href: string;
  icon?: React.ReactNode;
  active?: boolean;
}