80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
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 = () => {
|
|
sessionStorage.clear();
|
|
router.push("/");
|
|
};
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 h-screen w-56 bg-[#0a0d0f] border-r border-[#1a2a1a] flex flex-col z-50">
|
|
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3 px-5 py-6 border-b border-[#1a2a1a]">
|
|
<DragonEye size={32} />
|
|
<div>
|
|
<div className="text-[8px] font-mono tracking-[0.3em] text-[#4aff8c]/40 uppercase">Analytics</div>
|
|
<div className="text-base font-black tracking-widest text-white">WYVIEW</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<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-sm text-left transition-all duration-150 group ${
|
|
active
|
|
? "bg-[#4aff8c]/8 border border-[#4aff8c]/20 text-[#4aff8c]"
|
|
: "border border-transparent text-[#4a6a4a] hover:text-[#a0c4a0] hover:bg-white/[0.03]"
|
|
}`}
|
|
>
|
|
<Icon size={14} className="flex-shrink-0" />
|
|
<span className="text-[11px] font-mono tracking-wider">{label}</span>
|
|
{active && <span className="ml-auto w-1 h-1 rounded-full bg-[#4aff8c]" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="px-3 py-4 border-t border-[#1a2a1a]">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-sm text-[#3a5a3a] hover:text-red-400 hover:bg-red-500/5 border border-transparent hover:border-red-500/20 transition-all duration-150"
|
|
>
|
|
<LogOut size={14} />
|
|
<span className="text-[11px] font-mono tracking-wider">DÉCONNEXION</span>
|
|
</button>
|
|
</div>
|
|
|
|
</aside>
|
|
);
|
|
} |