Init

src/components/layout/header.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { UserMenu } from "./user-menu";
+import { MobileSidebar } from "./mobile-sidebar";
+
+const routeTitles: Record<string, string> = {
+  "/dashboard": "Dashboard",
+  "/filaments": "Filaments",
+  "/resins": "Resins",
+  "/paints": "Paints",
+  "/vendors": "Vendors",
+  "/locations": "Locations",
+  "/settings": "Settings",
+};
+
+export function Header() {
+  const pathname = usePathname();
+  const title = routeTitles[pathname] || "Dragon's Stash";
+
+  return (
+    <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b border-border bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:px-6">
+      {/* Mobile menu */}
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant="ghost" size="icon" className="lg:hidden">
+            <Menu className="h-5 w-5" />
+            <span className="sr-only">Toggle menu</span>
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-60 p-0">
+          <MobileSidebar />
+        </SheetContent>
+      </Sheet>
+
+      <h1 className="text-lg font-semibold">{title}</h1>
+
+      <div className="ml-auto">
+        <UserMenu />
+      </div>
+    </header>
+  );
+}

src/components/layout/mobile-sidebar.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  LayoutDashboard,
+  Cylinder,
+  Droplets,
+  Paintbrush,
+  Building2,
+  MapPin,
+  Settings,
+  Flame,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { APP_NAME } from "@/lib/constants";
+import { SheetHeader, SheetTitle } from "@/components/ui/sheet";
+
+const icons = { LayoutDashboard, Cylinder, Droplets, Paintbrush, Building2, MapPin, Settings };
+
+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 MobileSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex h-full flex-col">
+      <SheetHeader className="border-b border-border p-4">
+        <SheetTitle className="flex items-center gap-2">
+          <Flame className="h-5 w-5 text-primary" />
+          {APP_NAME}
+        </SheetTitle>
+      </SheetHeader>
+      <nav className="flex-1 space-y-1 p-2">
+        {navItems.map((item) => {
+          const Icon = icons[item.icon];
+          const isActive = pathname.startsWith(item.href);
+
+          return (
+            <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" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}

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

src/components/layout/user-menu.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { signOut, useSession } from "next-auth/react";
+import Link from "next/link";
+import { LogOut, Settings, User } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function UserMenu() {
+  const { data: session } = useSession();
+
+  if (!session?.user) return null;
+
+  const initials = session.user.name
+    ? session.user.name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2)
+    : "U";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-muted">
+        <Avatar className="h-7 w-7">
+          <AvatarImage src={session.user.image || undefined} />
+          <AvatarFallback className="bg-primary/20 text-xs text-primary">{initials}</AvatarFallback>
+        </Avatar>
+        <span className="hidden text-sm font-medium md:inline-block">{session.user.name}</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col">
+            <span className="text-sm">{session.user.name}</span>
+            <span className="text-xs text-muted-foreground">{session.user.email}</span>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/settings">
+            <Settings className="mr-2 h-4 w-4" />
+            Settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => signOut({ callbackUrl: "/login" })}>
+          <LogOut className="mr-2 h-4 w-4" />
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}