Initial commit

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