44 lines
1.4 KiB
React
44 lines
1.4 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 }) {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
function handleLogout() {
|
|
logout();
|
|
navigate('/login');
|
|
}
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<div className={styles.left}>
|
|
{/* Bouton burger pour mobile */}
|
|
<button className={styles.burgerBtn} onClick={onToggleSidebar} aria-label="Menu">
|
|
<Menu size={20} color="var(--color-white)" />
|
|
</button>
|
|
<div className={styles.logo}>
|
|
<span className={styles.logoIcon}>▶</span>
|
|
<span className={styles.logoText}>Data Sentinel</span>
|
|
</div>
|
|
<span className={styles.byXefi}>by XEFI</span>
|
|
</div>
|
|
|
|
<div className={styles.right}>
|
|
<button className={styles.iconBtn} aria-label="Notifications">
|
|
<Bell size={18} color="var(--color-white)" />
|
|
</button>
|
|
{user && <span className={styles.username}>{user.nom}</span>}
|
|
<button className={styles.logoutBtn} onClick={handleLogout}>
|
|
<LogOut size={15} />
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|