Header

import Header from '@/components/layout/header.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Header />
    </div>
  )
}

'use client'

import { usePathname } from 'next/navigation'
import { Separator } from '@/components/ui/separator'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { ThemeToggle } from '@/components/layout/theme-toggle'
import { ProfileDropdown } from '@/components/blocks/profile-dropdown'
import { SearchTrigger } from '@/components/layout/command-menu'

export function Header() {
  const pathname = usePathname()

  return (
    <header className="sticky top-0 z-40 border-b border-border/80 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80">
      <div className="flex h-14 items-center gap-3 px-4 sm:px-6">
        <SidebarTrigger className="[&_svg]:size-5" />
        <Separator orientation='vertical' className='hidden !h-4 sm:block' />

        {/* Search trigger */}
        <SearchTrigger />

        <div className="ml-auto flex items-center gap-0.5 sm:gap-1">
          <ThemeToggle />
          <ProfileDropdown loginRedirect={pathname} />
        </div>
      </div>
    </header>
  )
}