94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import {
|
||
|
|
Book1Outlined,
|
||
|
|
Folder1Outlined,
|
||
|
|
PlusOutlined,
|
||
|
|
} from "@lineiconshq/free-icons";
|
||
|
|
import { Lineicons } from "@lineiconshq/react-lineicons";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{
|
||
|
|
href: "/dashboard",
|
||
|
|
label: "Tutoriels",
|
||
|
|
icon: Book1Outlined,
|
||
|
|
exact: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/dashboard/nouveau",
|
||
|
|
label: "Nouveau",
|
||
|
|
icon: PlusOutlined,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
href: "/dashboard/categories",
|
||
|
|
label: "Catégories",
|
||
|
|
icon: Folder1Outlined,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
export function DashboardSidebar() {
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
const isActive = (href: string, exact?: boolean) => {
|
||
|
|
if (exact) return pathname === href;
|
||
|
|
return pathname.startsWith(href);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="w-64 min-h-[calc(100vh-65px)] border-r border-slate-800/50 bg-slate-900/30 backdrop-blur-sm sticky top-16">
|
||
|
|
<div className="p-4">
|
||
|
|
{/* Section title */}
|
||
|
|
<div className="px-4 py-2 mb-2">
|
||
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||
|
|
Gestion
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Nav items */}
|
||
|
|
<nav className="space-y-1">
|
||
|
|
{navItems.map((item) => {
|
||
|
|
const active = isActive(item.href, item.exact);
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
key={item.href}
|
||
|
|
href={item.href}
|
||
|
|
className={`group flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
|
||
|
|
active
|
||
|
|
? "bg-cyan-500/10 text-cyan-400 border-l-2 border-cyan-400 ml-[-1px]"
|
||
|
|
: "text-slate-400 hover:text-slate-100 hover:bg-slate-800/50"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<Lineicons
|
||
|
|
icon={item.icon}
|
||
|
|
size={20}
|
||
|
|
className={`transition-transform duration-200 ${
|
||
|
|
active ? "" : "group-hover:scale-110"
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
<span>{item.label}</span>
|
||
|
|
{active && (
|
||
|
|
<span className="ml-auto w-1.5 h-1.5 rounded-full bg-cyan-400" />
|
||
|
|
)}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{/* Divider */}
|
||
|
|
<div className="my-6 border-t border-slate-800/50" />
|
||
|
|
|
||
|
|
{/* Quick action */}
|
||
|
|
<Link
|
||
|
|
href="/dashboard/nouveau"
|
||
|
|
className="flex items-center justify-center gap-2 px-4 py-3 rounded-lg text-sm font-medium bg-gradient-to-r from-cyan-500/20 to-violet-500/20 text-slate-100 hover:from-cyan-500/30 hover:to-violet-500/30 border border-slate-700/50 hover:border-cyan-500/30 transition-all duration-300"
|
||
|
|
>
|
||
|
|
<Lineicons icon={PlusOutlined} size={18} />
|
||
|
|
<span>Créer un tuto</span>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|