96 lines
4.2 KiB
TypeScript
96 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import { signOut } from "next-auth/react";
|
|
import DragonEye from "@/components/DragonEye";
|
|
import ThemeToggleButton from "@/components/ThemeToggleButton";
|
|
import { useTheme } from "@/lib/theme";
|
|
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 { theme } = useTheme();
|
|
const isLight = theme === "light";
|
|
|
|
const handleLogout = () => {
|
|
signOut({ callbackUrl: "/" });
|
|
};
|
|
|
|
const bg = isLight ? "bg-wy-light-surface" : "bg-wy-dark";
|
|
const border = isLight ? "border-wy-light-border" : "border-wy-border";
|
|
const textSec = isLight ? "text-wy-light-text-secondary" : "text-wy-text-secondary";
|
|
const textPri = isLight ? "text-wy-light-text-primary" : "text-wy-text-primary";
|
|
const title = isLight ? "text-wy-light-text-primary" : "text-white";
|
|
|
|
return (
|
|
<aside className={`fixed left-0 top-0 h-screen w-56 ${bg} border-r ${border} flex flex-col z-50`}>
|
|
|
|
{/* Logo */}
|
|
<div className={`flex items-center gap-3 px-5 py-6 border-b ${border}`}>
|
|
<DragonEye size={32} />
|
|
<div>
|
|
<div className={`text-[8px] font-mono tracking-[0.3em] ${isLight ? "text-sky-400/80" : "text-acid-green/60"} uppercase`}>Analytics</div>
|
|
<div className={`text-base font-black tracking-widest ${title}`}>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
|
|
? isLight
|
|
? "bg-sky-100 border border-sky-300 text-sky-600"
|
|
: "bg-acid-green/10 border border-acid-green/30 text-acid-green"
|
|
: `border border-transparent ${textSec} hover:${textPri} ${isLight ? "hover:bg-sky-50" : "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 ${isLight ? "bg-sky-500" : "bg-acid-green"}`} />
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className={`px-3 py-4 border-t ${border} flex flex-col gap-2`}>
|
|
{/* Theme toggle */}
|
|
<div className="flex justify-end pr-1">
|
|
<ThemeToggleButton />
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md ${textSec} 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>
|
|
);
|
|
} |