LathanDevers
102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
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';
|
|
import { useTheme } from '@/hooks/useTheme';
|
|
import { ThemeToggle } from '@ui/ThemeToggle';
|
|
|
|
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', 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, className }) => {
|
|
const { isDark, toggleTheme } = useTheme();
|
|
return (
|
|
<Card className={cn("w-60 flex flex-col p-6 shrink-0", 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] transition-all duration-300 ease-in-out",
|
|
"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 transition-all duration-300 ease-in-out" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
|
|
<ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
|
|
{/* 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={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"
|
|
)}
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
<span className="text-sm font-bold">Déconnexion</span>
|
|
</button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default Sidebar; |