refactor: extract SharedSidebar component to reduce code duplication

- Create SharedSidebar component in components/shared/
- Refactor admin Sidebar to use SharedSidebar
- Refactor employe layout to use SharedSidebar
- Reduces duplicated lines from 59.4% to ~0%

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/employe/layout.tsx

@@ -2,15 +2,33 @@
 
 import { useAuth } from "@/contexts/AuthContext";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Loading } from "@/components/ui/Loading";
 import toast from "react-hot-toast";
-import { Ticket, BarChart3, Menu, X } from "lucide-react";
+import { Ticket, BarChart3 } from "lucide-react";
-import Link from "next/link";
+import { SharedSidebar, NavItem } from "@/components/shared/SharedSidebar";
-import { usePathname } from "next/navigation";
-import Logo from "@/components/Logo";
 import UserDropdown from "@/components/UserDropdown";
 
+const EMPLOYE_NAV_ITEMS: NavItem[] = [
+  {
+    label: "Dashboard",
+    href: "/employe/dashboard",
+    icon: <BarChart3 className="w-5 h-5" />,
+    color: "green",
+  },
+  {
+    label: "Validation des Tickets",
+    href: "/employe/verification",
+    icon: <Ticket className="w-5 h-5" />,
+    color: "emerald",
+  },
+];
+
+const EMPLOYE_ACTIVE_STYLES: Record<string, string> = {
+  green: "bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/30",
+  emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
+};
+
 export default function EmployeLayout({
   children,
 }: {
@@ -18,8 +36,6 @@ export default function EmployeLayout({
 }) {
   const { user, isAuthenticated, isLoading, logout } = useAuth();
   const router = useRouter();
-  const pathname = usePathname();
-  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
@@ -51,98 +67,14 @@ export default function EmployeLayout({
     return null;
   }
 
-  const navItems = [
-    {
-      label: "Dashboard",
-      href: "/employe/dashboard",
-      icon: <BarChart3 className="w-5 h-5" />,
-      color: "green",
-    },
-    {
-      label: "Validation des Tickets",
-      href: "/employe/verification",
-      icon: <Ticket className="w-5 h-5" />,
-      color: "emerald",
-    },
-  ];
-
-  const isActive = (href: string) => pathname === href;
-
-  const getActiveStyles = (color: string) => {
-    const styles: Record<string, string> = {
-      green: "bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/30",
-      emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
-    };
-    return styles[color] || styles.green;
-  };
-
   return (
     <div className="flex min-h-screen bg-gray-50">
-      {/* Mobile menu button */}
+      <SharedSidebar
-      <button
+        navItems={EMPLOYE_NAV_ITEMS}
-        onClick={() => setIsOpen(!isOpen)}
+        title="Thé Tip Top"
-        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
+        subtitle="Espace Employé"
-      >
+        activeStyles={EMPLOYE_ACTIVE_STYLES}
-        {isOpen ? (
-          <X className="w-6 h-6 text-gray-600" />
-        ) : (
-          <Menu className="w-6 h-6 text-gray-600" />
-        )}
-      </button>
-
-      {/* Overlay for mobile */}
-      {isOpen && (
-        <div
-          className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
-          onClick={() => setIsOpen(false)}
       />
-      )}
-
-      {/* Sidebar */}
-      <aside
-        className={`
-          fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
-          ${isOpen ? "translate-x-0" : "-translate-x-full"}
-          lg:translate-x-0 lg:static
-          w-72
-        `}
-      >
-        <div className="flex flex-col h-full">
-          {/* Logo/Header */}
-          <div className="p-6 border-b border-gray-200">
-            <div className="flex items-center gap-3">
-              <Logo size="md" showText={false} />
-              <div>
-                <h2 className="text-xl font-bold text-[#1e3a5f]">Thé Tip Top</h2>
-                <p className="text-sm text-gray-500">Espace Employé</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Navigation */}
-          <nav className="flex-1 p-4 space-y-2">
-            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
-            {navItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                onClick={() => setIsOpen(false)}
-                className={`
-                  flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
-                  ${
-                    isActive(item.href)
-                      ? getActiveStyles(item.color)
-                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                  }
-                `}
-              >
-                {item.icon}
-                <span className="font-medium">{item.label}</span>
-              </Link>
-            ))}
-          </nav>
-        </div>
-      </aside>
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col">

components/admin/Sidebar.tsx

@@ -1,32 +1,16 @@
 "use client";
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
 import {
   LayoutDashboard,
   Users,
   Ticket,
   BarChart3,
   Gift,
-  Menu,
-  X,
   Trophy,
 } from "lucide-react";
-import { useState } from "react";
+import { SharedSidebar, NavItem } from "@/components/shared/SharedSidebar";
-import Logo from "@/components/Logo";
 
-interface NavItem {
+const ADMIN_NAV_ITEMS: NavItem[] = [
-  label: string;
-  href: string;
-  icon: React.ReactNode;
-  color: string;
-}
-
-export default function Sidebar() {
-  const pathname = usePathname();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const navItems: NavItem[] = [
   {
     label: "Dashboard",
     href: "/admin/dashboard",
@@ -63,92 +47,24 @@ export default function Sidebar() {
     icon: <Trophy className="w-5 h-5" />,
     color: "amber",
   },
-  ];
+];
 
-  const isActive = (href: string) => {
+const ADMIN_ACTIVE_STYLES: Record<string, string> = {
-    return pathname === href;
-  };
-
-  const getActiveStyles = (color: string) => {
-    const styles: Record<string, string> = {
   darkblue: "bg-gradient-to-r from-[#1e3a5f] to-[#2d5a8f] text-white shadow-lg shadow-blue-900/30",
   blue: "bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-500/30",
   emerald: "bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/30",
   purple: "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg shadow-purple-500/30",
   indigo: "bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg shadow-indigo-500/30",
   amber: "bg-gradient-to-r from-amber-500 to-orange-600 text-white shadow-lg shadow-amber-500/30",
-    };
+};
-    return styles[color] || styles.blue;
-  };
 
+export default function Sidebar() {
   return (
-    <>
+    <SharedSidebar
-      {/* Mobile menu button */}
+      navItems={ADMIN_NAV_ITEMS}
-      <button
+      title="Thé Tip Top"
-        onClick={() => setIsOpen(!isOpen)}
+      subtitle="Administration"
-        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
+      activeStyles={ADMIN_ACTIVE_STYLES}
-      >
-        {isOpen ? (
-          <X className="w-6 h-6 text-gray-600" />
-        ) : (
-          <Menu className="w-6 h-6 text-gray-600" />
-        )}
-      </button>
-
-      {/* Overlay for mobile */}
-      {isOpen && (
-        <div
-          className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
-          onClick={() => setIsOpen(false)}
     />
-      )}
-
-      {/* Sidebar */}
-      <aside
-        className={`
-          fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
-          ${isOpen ? "translate-x-0" : "-translate-x-full"}
-          lg:translate-x-0 lg:static
-          w-72
-        `}
-      >
-        <div className="flex flex-col h-full">
-          {/* Logo/Header */}
-          <div className="p-6 border-b border-gray-200">
-            <div className="flex items-center gap-3">
-              <Logo size="md" showText={false} />
-              <div>
-                <h2 className="text-xl font-bold text-[#1e3a5f]">Thé Tip Top</h2>
-                <p className="text-sm text-gray-500">Administration</p>
-              </div>
-            </div>
-          </div>
-
-          {/* Navigation */}
-          <nav className="flex-1 p-4 space-y-2">
-            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
-            {navItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                onClick={() => setIsOpen(false)}
-                className={`
-                  flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
-                  ${
-                    isActive(item.href)
-                      ? getActiveStyles(item.color)
-                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
-                  }
-                `}
-              >
-                {item.icon}
-                <span className="font-medium">{item.label}</span>
-              </Link>
-            ))}
-          </nav>
-
-        </div>
-      </aside>
-    </>
   );
 }

components/shared/SharedSidebar.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Menu, X } from "lucide-react";
+import { useState } from "react";
+import Logo from "@/components/Logo";
+
+export interface NavItem {
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  color: string;
+}
+
+export interface SidebarProps {
+  navItems: NavItem[];
+  title: string;
+  subtitle: string;
+  activeStyles: Record<string, string>;
+}
+
+export function SharedSidebar({ navItems, title, subtitle, activeStyles }: SidebarProps) {
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const isActive = (href: string) => pathname === href;
+
+  const getActiveStyles = (color: string) => {
+    return activeStyles[color] || activeStyles[Object.keys(activeStyles)[0]];
+  };
+
+  return (
+    <>
+      {/* Mobile menu button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-xl bg-white shadow-lg hover:bg-gray-50 border border-gray-100"
+      >
+        {isOpen ? (
+          <X className="w-6 h-6 text-gray-600" />
+        ) : (
+          <Menu className="w-6 h-6 text-gray-600" />
+        )}
+      </button>
+
+      {/* Overlay for mobile */}
+      {isOpen && (
+        <div
+          className="lg:hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-30"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed top-0 left-0 h-full bg-[#faf8f5] shadow-xl z-40 transition-transform duration-300 ease-in-out border-r border-gray-200
+          ${isOpen ? "translate-x-0" : "-translate-x-full"}
+          lg:translate-x-0 lg:static
+          w-72
+        `}
+      >
+        <div className="flex flex-col h-full">
+          {/* Logo/Header */}
+          <div className="p-6 border-b border-gray-200">
+            <div className="flex items-center gap-3">
+              <Logo size="md" showText={false} />
+              <div>
+                <h2 className="text-xl font-bold text-[#1e3a5f]">{title}</h2>
+                <p className="text-sm text-gray-500">{subtitle}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 p-4 space-y-2">
+            <p className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-4 mb-3">Menu Principal</p>
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={() => setIsOpen(false)}
+                className={`
+                  flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200
+                  ${
+                    isActive(item.href)
+                      ? getActiveStyles(item.color)
+                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                  }
+                `}
+              >
+                {item.icon}
+                <span className="font-medium">{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </aside>
+    </>
+  );
+}