added neumorphism button card sidebar and created styles folder

src/components/layout/Sidebar.tsx

@@ -1,56 +1,97 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-react';
 import { cn } from '@/utils/utils';
+import { Card } from '@/components/ui/Card';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
 
 interface SidebarProps {
   onLogout: () => void;
+  className?: string;
 }
 
+// Liste de tes liens réels avec leurs icônes associées
 const NAVIGATION_ITEMS = [
-  { name: 'Trust Center', path: '/dashboard' },
-  { name: 'Service Desk', path: '/support' },
-  { name: 'Coffre-fort', path: '/vault' },
-  { name: 'Paramètres', path: '/account' },
+  { name: 'Trust Center', path: '/dashboard', icon: ShieldCheck },
+  { name: 'Service Desk', path: '/support', icon: HelpCircle },
+  { name: 'Coffre-fort', path: '/vault', icon: Lock },
+  { name: 'Paramètres', path: '/account', icon: Settings },
 ];
 
-export const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
+
+
+export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
   return (
-    <aside className="w-64 bg-slate-900 flex flex-col shrink-0">
-      {/* En-tête / Logo */}
-      <div className="h-16 flex items-center px-6 border-b border-slate-800">
-        <span className="text-xl font-bold text-white tracking-widest">Aegis<span className="text-blue-500">.</span></span>
+    <Card className={cn("w-72 h-full flex flex-col p-6 shrink-0 rounded-none rounded-r-3xl", className)}>
+      {/* 1. EN-TÊTE / LOGO */}
+      <div className="flex items-center gap-4 mb-10 px-2">
+        {/* Petit badge logo avec effet creusé */}
+        <div className={cn(
+          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
+        )}>
+          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none">AEGIS</h1>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">by GISE</span>
+        </div>
       </div>
 
-      {/* Menu de navigation URL-based */}
-      <nav className="flex-1 px-4 py-6 space-y-2">
-        {NAVIGATION_ITEMS.map((item) => (
-          <NavLink
-            key={item.path}
-            to={item.path}
-            className={({ isActive }) =>
-              cn(
-                "flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors duration-200",
-                isActive 
-                  ? "bg-blue-900/50 text-white border border-blue-800/50" 
-                  : "text-slate-400 hover:bg-slate-800 hover:text-slate-200 border border-transparent"
-              )
-            }
-          >
-            {item.name}
-          </NavLink>
-        ))}
+      {/* 2. NAVIGATION PRINCIPALE (Basée sur l'URL) */}
+      <nav className="flex flex-col gap-4 flex-1">
+        {NAVIGATION_ITEMS.map((item) => {
+          const Icon = item.icon;
+
+          return (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) =>
+                cn(
+                  "w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
+                  "bg-[#e8e8e8] dark:bg-[#1e293b]",
+                  isActive
+                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "!text-blue-600 dark:!text-blue-400 font-black")
+                    : cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
+                )
+              }
+            >
+              {({ isActive }) => (
+                <>
+                  <Icon
+                    className={cn(
+                      "w-5 h-5 transition-transform duration-300 ease-in-out shrink-0",
+                      isActive ? "scale-110" : "scale-100"
+                    )}
+                    strokeWidth={isActive ? 2.5 : 2}
+                  />
+                  <span className="text-sm">{item.name}</span>
+                </>
+              )}
+            </NavLink>
+          );
+        })}
       </nav>
 
-      {/* Zone de déconnexion */}
-      <div className="p-4 border-t border-slate-800">
+      {/* 3. ZONE DE DÉCONNEXION */}
+      <div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
         <button
           onClick={onLogout}
-          className="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-slate-400 hover:text-red-400 hover:bg-slate-800 rounded-lg transition-all cursor-pointer"
+          className={cn(
+            "w-full flex items-center justify-start gap-4 px-5 py-4 rounded-2xl cursor-pointer transition-all duration-300 ease-in-out",
+            "bg-[#e8e8e8] dark:bg-[#1e293b]",
+            NEUMORPHISM.lightShadow,
+            NEUMORPHISM.darkShadow,
+            "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+            "text-rose-500 dark:text-rose-400 font-bold"
+          )}
         >
-          Déconnexion
+          <LogOut className="w-5 h-5" />
+          <span className="text-sm font-bold">Déconnexion</span>
         </button>
       </div>
-    </aside>
+    </Card>
   );
 };