63 lines
2.0 KiB
React
63 lines
2.0 KiB
React
/* En-tête fixe de l'application Data Sentinel */
|
|
|
|
import { Bell, LogOut, Menu } from 'lucide-react';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import styles from './Header.module.css';
|
|
|
|
export default function Header({ onToggleSidebar, sidebarOpen }) {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
function handleLogout() {
|
|
logout();
|
|
navigate('/login');
|
|
}
|
|
|
|
return (
|
|
<header className={styles.header} role="banner">
|
|
{/* Lien d'évitement pour l'accessibilité clavier */}
|
|
<a href="#main-content" className={styles.skipLink}>
|
|
Aller au contenu principal
|
|
</a>
|
|
|
|
<div className={styles.left}>
|
|
{/* Bouton burger pour mobile */}
|
|
<button
|
|
className={styles.burgerBtn}
|
|
onClick={onToggleSidebar}
|
|
aria-label={sidebarOpen ? 'Fermer le menu' : 'Ouvrir le menu'}
|
|
aria-expanded={sidebarOpen}
|
|
aria-controls="sidebar"
|
|
>
|
|
<Menu size={20} color="var(--color-white)" aria-hidden="true" />
|
|
</button>
|
|
<div className={styles.logo} role="img" aria-label="Data Sentinel">
|
|
<span className={styles.logoIcon} aria-hidden="true">▶</span>
|
|
<span className={styles.logoText}>Data Sentinel</span>
|
|
</div>
|
|
<span className={styles.byXefi} aria-label="by XEFI">by XEFI</span>
|
|
</div>
|
|
|
|
<div className={styles.right}>
|
|
<button className={styles.iconBtn} aria-label="Notifications">
|
|
<Bell size={18} color="var(--color-white)" aria-hidden="true" />
|
|
</button>
|
|
{user && (
|
|
<span className={styles.username} aria-label={`Connecté en tant que ${user.username}`}>
|
|
{user.username}
|
|
</span>
|
|
)}
|
|
<button
|
|
className={styles.logoutBtn}
|
|
onClick={handleLogout}
|
|
aria-label="Se déconnecter"
|
|
>
|
|
<LogOut size={15} aria-hidden="true" />
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|