feat(06-01): create AdminSidebar component with 7 nav links + logout

- Client component using usePathname for active route highlighting - 7 nav links: Dashboard, Clienti, Progetti, Offerte, Forecast, Catalogo, Impostazioni - Logout button at bottom calls signOut with /admin/login callback - Green sidebar bg #1A463C matching brand
2026-05-31 20:08:33 +02:00
parent 26a688cec8
commit 2283740d20
1 changed files with 73 additions and 0 deletions
@@ -0,0 +1,73 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { signOut } from "next-auth/react";
+import {
+  LayoutDashboard,
+  Users,
+  FolderOpen,
+  Tag,
+  TrendingUp,
+  BookOpen,
+  Settings,
+  LogOut,
+} from "lucide-react";
+
+const NAV_ITEMS = [
+  { href: "/admin",              label: "Dashboard",    icon: LayoutDashboard, exact: true },
+  { href: "/admin/clients",      label: "Clienti",      icon: Users },
+  { href: "/admin/projects",     label: "Progetti",     icon: FolderOpen },
+  { href: "/admin/offers",       label: "Offerte",      icon: Tag },
+  { href: "/admin/forecast",     label: "Forecast",     icon: TrendingUp },
+  { href: "/admin/catalog",      label: "Catalogo",     icon: BookOpen },
+  { href: "/admin/impostazioni", label: "Impostazioni", icon: Settings },
+];
+
+export function AdminSidebar() {
+  const pathname = usePathname();
+
+  const isActive = (href: string, exact?: boolean) =>
+    exact ? pathname === href : pathname === href || pathname.startsWith(href + "/");
+
+  return (
+    <aside className="w-56 shrink-0 min-h-screen bg-[#1A463C] flex flex-col">
+      {/* Logo */}
+      <div className="px-5 py-5 border-b border-white/10">
+        <span className="font-bold text-white tracking-tight text-sm">iamcavalli</span>
+      </div>
+
+      {/* Nav links */}
+      <nav className="flex-1 px-3 py-4 flex flex-col gap-0.5">
+        {NAV_ITEMS.map(({ href, label, icon: Icon, exact }) => {
+          const active = isActive(href, exact);
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
+                active
+                  ? "bg-white/15 text-white font-medium"
+                  : "text-white/65 hover:text-white hover:bg-white/10"
+              }`}
+            >
+              <Icon size={16} strokeWidth={1.8} />
+              {label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Logout */}
+      <div className="px-3 py-4 border-t border-white/10">
+        <button
+          onClick={() => signOut({ callbackUrl: "/admin/login" })}
+          className="flex items-center gap-3 px-3 py-2 w-full rounded-md text-sm text-white/65 hover:text-white hover:bg-white/10 transition-colors"
+        >
+          <LogOut size={16} strokeWidth={1.8} />
+          Esci
+        </button>
+      </div>
+    </aside>
+  );
+}