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>
+  );
+}

components/layout/Sidebar.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { LayoutDashboard, FolderKanban, Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useUIStore } from '@/stores/ui-store';
+
+const navItems = [
+  {
+    title: 'Dashboard',
+    href: '/dashboard',
+    icon: LayoutDashboard,
+  },
+  {
+    title: 'Projects',
+    href: '/projects',
+    icon: FolderKanban,
+  },
+  {
+    title: 'Settings',
+    href: '/settings',
+    icon: Settings,
+  },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const sidebarOpen = useUIStore((state) => state.sidebarOpen);
+
+  if (!sidebarOpen) return null;
+
+  return (
+    <aside className="fixed left-0 top-14 z-40 h-[calc(100vh-3.5rem)] w-64 border-r border-border bg-background">
+      <nav className="flex flex-col gap-1 p-4">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              {item.title}
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}