Initial commit

components/layout/Header.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { Menu } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useUIStore } from '@/stores/ui-store';
+
+export function Header() {
+  const toggleSidebar = useUIStore((state) => state.toggleSidebar);
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-14 items-center px-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mr-4"
+          onClick={toggleSidebar}
+        >
+          <Menu className="h-5 w-5" />
+          <span className="sr-only">Toggle sidebar</span>
+        </Button>
+
+        <div className="flex items-center gap-2">
+          <h1 className="text-lg font-semibold">ColaFlow</h1>
+        </div>
+
+        <div className="ml-auto flex items-center gap-4">
+          {/* Add user menu, notifications, etc. here */}
+        </div>
+      </div>
+    </header>
+  );
+}