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
This commit is contained in:
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user