78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import { signOut } from "next-auth/react";
|
|
import DragonEye from "@/components/DragonEye";
|
|
import {
|
|
LayoutDashboard,
|
|
Twitch,
|
|
Youtube,
|
|
Instagram,
|
|
Music2,
|
|
DollarSign,
|
|
LogOut,
|
|
} from "lucide-react";
|
|
|
|
const nav = [
|
|
{ label: "Vue générale", href: "/dashboard", icon: LayoutDashboard },
|
|
{ label: "Twitch", href: "/twitch", icon: Twitch },
|
|
{ label: "YouTube", href: "/youtube", icon: Youtube },
|
|
{ label: "Instagram", href: "/instagram", icon: Instagram },
|
|
{ label: "TikTok", href: "/tiktok", icon: Music2 },
|
|
{ label: "Finances", href: "/finances", icon: DollarSign },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
const handleLogout = () => {
|
|
signOut({ callbackUrl: "/" });
|
|
};
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 h-screen w-56 bg-wy-dark border-r border-wy-border flex flex-col z-50">
|
|
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3 px-5 py-6 border-b border-wy-border">
|
|
<DragonEye size={32} />
|
|
<div>
|
|
<div className="text-[8px] font-mono tracking-[0.3em] text-acid-green/60 uppercase">Analytics</div>
|
|
<div className="text-base font-black tracking-widest text-white">WYVIEW</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex-1 px-3 py-4 flex flex-col gap-1">
|
|
{nav.map(({ label, href, icon: Icon }) => {
|
|
const active = pathname === href;
|
|
return (
|
|
<button
|
|
key={href}
|
|
onClick={() => router.push(href)}
|
|
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${
|
|
active
|
|
? "bg-acid-green/10 border border-acid-green/30 text-acid-green"
|
|
: "border border-transparent text-wy-text-secondary hover:text-wy-text-primary hover:bg-white/[0.04]"
|
|
}`}
|
|
>
|
|
<Icon size={16} className="flex-shrink-0" />
|
|
<span className="text-sm font-medium">{label}</span>
|
|
{active && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-acid-green" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="px-3 py-4 border-t border-wy-border">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-wy-text-secondary hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150"
|
|
>
|
|
<LogOut size={16} />
|
|
<span className="text-sm font-medium">Déconnexion</span>
|
|
</button>
|
|
</div>
|
|
|
|
</aside>
|
|
);
|
|
} |