91 lines
2.7 KiB
React
91 lines
2.7 KiB
React
/* Barre de navigation latérale fixe */
|
|
|
|
import { NavLink } from 'react-router-dom';
|
|
import {
|
|
LayoutGrid,
|
|
Layers,
|
|
Clock,
|
|
Settings,
|
|
Users,
|
|
List,
|
|
Book,
|
|
Shield,
|
|
FileText,
|
|
} from 'lucide-react';
|
|
import styles from './Sidebar.module.css';
|
|
|
|
/* Un lien de navigation avec icône */
|
|
function NavItem({ to, icon: Icon, label }) {
|
|
return (
|
|
<NavLink
|
|
to={to}
|
|
className={({ isActive }) =>
|
|
`${styles.navItem} ${isActive ? styles.active : ''}`
|
|
}
|
|
aria-current={undefined}
|
|
>
|
|
<Icon size={16} aria-hidden="true" />
|
|
<span>{label}</span>
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export default function Sidebar({ isOpen, onClose }) {
|
|
return (
|
|
<>
|
|
{/* Overlay mobile pour fermer la sidebar */}
|
|
{isOpen && (
|
|
<div
|
|
className={styles.overlay}
|
|
onClick={onClose}
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
/>
|
|
)}
|
|
|
|
<aside
|
|
id="sidebar"
|
|
className={`${styles.sidebar} ${isOpen ? styles.open : ''}`}
|
|
aria-label="Navigation principale"
|
|
>
|
|
<nav className={styles.nav} aria-label="Menu de navigation">
|
|
{/* Navigation principale */}
|
|
<div className={styles.section} role="group" aria-label="Monitoring">
|
|
<NavItem to="/dashboard" icon={LayoutGrid} label="Dashboard" />
|
|
<NavItem to="/consolidee" icon={Layers} label="Vue consolidée" />
|
|
<NavItem to="/contrat" icon={List} label="Contrat" />
|
|
<NavItem to="/fournisseur" icon={Users} label="Fournisseur" />
|
|
<NavItem to="/historique" icon={Clock} label="Historique" />
|
|
</div>
|
|
|
|
<div className={styles.separator} role="separator" />
|
|
|
|
{/* Section administration */}
|
|
<div className={styles.sectionLabel} aria-hidden="true">ADMIN</div>
|
|
<div className={styles.section} role="group" aria-label="Administration">
|
|
<NavItem to="/admin" icon={Settings} label="Nomenclature" />
|
|
<NavItem to="/utilisateurs" icon={Users} label="Utilisateurs" />
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Liens de pied de sidebar */}
|
|
<nav className={styles.footer} aria-label="Liens utiles">
|
|
<NavLink to="/documentation" className={styles.footerLink}>
|
|
<Book size={13} aria-hidden="true" />
|
|
Documentation
|
|
</NavLink>
|
|
<NavLink to="/mentions-legales" className={styles.footerLink}>
|
|
<Shield size={13} aria-hidden="true" />
|
|
Mentions légales
|
|
</NavLink>
|
|
<NavLink to="/cgu" className={styles.footerLink}>
|
|
<FileText size={13} aria-hidden="true" />
|
|
CGU
|
|
</NavLink>
|
|
</nav>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|