feat: ajout structure projet + config Node 20

2025-12-07 00:11:21 +01:00
parent c728019f04
commit 25d49d04f0
60 changed files with 4260 additions and 157 deletions
@@ -0,0 +1,93 @@
+"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>
+    );
+}