Init

src/components/layout/sidebar.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  LayoutDashboard,
+  Cylinder,
+  Droplets,
+  Paintbrush,
+  Building2,
+  MapPin,
+  Settings,
+  Flame,
+  PanelLeftClose,
+  PanelLeft,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { APP_NAME } from "@/lib/constants";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+const icons = {
+  LayoutDashboard,
+  Cylinder,
+  Droplets,
+  Paintbrush,
+  Building2,
+  MapPin,
+  Settings,
+} as const;
+
+const navItems = [
+  { label: "Dashboard", href: "/dashboard", icon: "LayoutDashboard" as const },
+  { label: "Filaments", href: "/filaments", icon: "Cylinder" as const },
+  { label: "Resins", href: "/resins", icon: "Droplets" as const },
+  { label: "Paints", href: "/paints", icon: "Paintbrush" as const },
+  { label: "Vendors", href: "/vendors", icon: "Building2" as const },
+  { label: "Locations", href: "/locations", icon: "MapPin" as const },
+  { label: "Settings", href: "/settings", icon: "Settings" as const },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <aside
+      className={cn(
+        "flex h-screen flex-col border-r border-border bg-card transition-all duration-200",
+        collapsed ? "w-16" : "w-60"
+      )}
+    >
+      {/* Logo */}
+      <div className="flex h-14 items-center gap-2 border-b border-border px-4">
+        <Flame className="h-6 w-6 shrink-0 text-primary" />
+        {!collapsed && (
+          <span className="text-sm font-bold tracking-tight">{APP_NAME}</span>
+        )}
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 space-y-1 p-2">
+        {navItems.map((item) => {
+          const Icon = icons[item.icon];
+          const isActive = pathname.startsWith(item.href);
+
+          const link = (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                isActive
+                  ? "border-l-2 border-primary bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
+              )}
+            >
+              <Icon className="h-4 w-4 shrink-0" />
+              {!collapsed && <span>{item.label}</span>}
+            </Link>
+          );
+
+          if (collapsed) {
+            return (
+              <Tooltip key={item.href}>
+                <TooltipTrigger asChild>{link}</TooltipTrigger>
+                <TooltipContent side="right">{item.label}</TooltipContent>
+              </Tooltip>
+            );
+          }
+
+          return link;
+        })}
+      </nav>
+
+      {/* Collapse toggle */}
+      <div className="border-t border-border p-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full justify-center"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          {collapsed ? (
+            <PanelLeft className="h-4 w-4" />
+          ) : (
+            <>
+              <PanelLeftClose className="h-4 w-4 mr-2" />
+              <span className="text-xs">Collapse</span>
+            </>
+          )}
+        </Button>
+      </div>
+    </aside>
+  );
+}