234 lines
8.6 KiB
JavaScript
234 lines
8.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import { X, Menu, LogIn, UserPlus, LogOut, Settings } from "lucide-react";
|
|
import { Link } from "react-router-dom";
|
|
import { useAuth } from "../AuthContext";
|
|
|
|
function Header() {
|
|
const { token, logout } = useAuth();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const [showAdminDropdown, setShowAdminDropdown] = useState(false);
|
|
|
|
// La fonction toggleAdminDropdown permet d'ouvrir/fermer le menu déroulant
|
|
const toggleAdminDropdown = () => {
|
|
setShowAdminDropdown((prev) => !prev);
|
|
};
|
|
|
|
// Pour l'instant, le menu "Admin" est toujours affiché.
|
|
// TODO: Par la suite, ajoutez une vérification du rôle utilisateur (ex: token && user.role === "admin")
|
|
// afin d'afficher ce menu uniquement aux administrateurs.
|
|
return (
|
|
<header className="bg-white shadow-md sticky top-0 z-50">
|
|
<div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
<Link to="/" className="text-2xl font-bold text-indigo-600">
|
|
VigiMétéo
|
|
</Link>
|
|
<button
|
|
className="sm:hidden text-gray-600 hover:text-indigo-600"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
|
</button>
|
|
|
|
{/* Navigation */}
|
|
<nav
|
|
className={`${
|
|
isMenuOpen ? "block" : "hidden"
|
|
} absolute z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:w-auto sm:z-auto sm:flex sm:gap-6 sm:shadow-none`}
|
|
>
|
|
<ul className="flex flex-col sm:flex-row gap-4 sm:gap-6 text-gray-600 p-4 sm:p-0">
|
|
<li>
|
|
<Link
|
|
to="/"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="text-gray-600 hover:text-indigo-600"
|
|
>
|
|
Accueil
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/about"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="text-gray-600 hover:text-indigo-600"
|
|
>
|
|
À propos
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to="/gestion"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="text-gray-600 hover:text-indigo-600"
|
|
>
|
|
Gestion
|
|
</Link>
|
|
</li>
|
|
{/* Menu déroulant Admin toujours affiché */}
|
|
<li className="relative">
|
|
<button
|
|
onClick={toggleAdminDropdown}
|
|
className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none"
|
|
>
|
|
Admin
|
|
<svg
|
|
className="ml-1 h-4 w-4 fill-current"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
|
|
</svg>
|
|
</button>
|
|
{showAdminDropdown && (
|
|
<div className="absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50">
|
|
<Link
|
|
to="/dashboard"
|
|
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setShowAdminDropdown(false)}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
to="/user"
|
|
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setShowAdminDropdown(false)}
|
|
>
|
|
Gestion des Utilisateurs
|
|
</Link>
|
|
<Link
|
|
to="/adminobjet"
|
|
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setShowAdminDropdown(false)}
|
|
>
|
|
Gestion des Objets Connectés
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</li>
|
|
{!token ? (
|
|
<>
|
|
<li className="sm:hidden">
|
|
<Link
|
|
to="/login"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="hover:text-indigo-600 flex items-center gap-2"
|
|
>
|
|
<LogIn size={20} />
|
|
Connexion
|
|
</Link>
|
|
</li>
|
|
<li className="sm:hidden">
|
|
<Link
|
|
to="/signup"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
|
|
>
|
|
<UserPlus size={20} />
|
|
Inscription
|
|
</Link>
|
|
</li>
|
|
</>
|
|
) : (
|
|
<>
|
|
<li className="sm:hidden">
|
|
<Link
|
|
to="/settings"
|
|
onClick={()=>setIsMenuOpen(false)}
|
|
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
|
|
>
|
|
<Settings size={20} />
|
|
<span>Paramètres</span>
|
|
<span></span>
|
|
</Link>
|
|
</li>
|
|
<li className="sm:hidden">
|
|
<button
|
|
onClick={()=>{
|
|
logout();
|
|
setIsMenuOpen(false)}}
|
|
className="flex items-center gap-2 text-gray-600 hover:text-red-600"
|
|
>
|
|
<LogOut size={20} />
|
|
Déconnexion
|
|
</button>
|
|
</li>
|
|
</>
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
{!token ? (
|
|
<div className="hidden sm:flex gap-4 ">
|
|
<Link
|
|
to="/login"
|
|
onClick={()=>setIsMenuOpen(false)}
|
|
className="hover:text-indigo-600 flex items-center gap-2"
|
|
>
|
|
<LogIn size={20} />
|
|
Connexion
|
|
</Link>
|
|
<Link
|
|
to="/signup"
|
|
onClick={()=>setIsMenuOpen(false)}
|
|
className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
|
|
>
|
|
<UserPlus size={20} />
|
|
Inscription
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="hidden sm:flex gap-4">
|
|
<Link
|
|
to="/settings"
|
|
onClick={()=>setIsMenuOpen(false)}
|
|
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
|
|
>
|
|
<Settings size={20} />
|
|
</Link>
|
|
<button
|
|
onClick={logout}
|
|
className="flex items-center gap-2 text-gray-600 hover:text-red-600"
|
|
>
|
|
<LogOut size={20} />
|
|
Déconnexion
|
|
</button>
|
|
{/* Menu déroulant Admin visible sur sm+ */}
|
|
<div className="relative">
|
|
<button onClick={toggleAdminDropdown} className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none">
|
|
Admin
|
|
<svg className="ml-1 h-4 w-4 fill-current" viewBox="0 0 20 20">
|
|
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
|
|
</svg>
|
|
</button>
|
|
{showAdminDropdown && (
|
|
<div className="absolute top-full left-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-50">
|
|
<Link
|
|
to="/dashboard"
|
|
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setShowAdminDropdown(false)}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
<Link
|
|
to="/user"
|
|
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setShowAdminDropdown(false)}
|
|
>
|
|
Gestion des Utilisateurs
|
|
</Link>
|
|
<Link
|
|
to="/adminobjet"
|
|
className="block px-4 py-2 text-gray-700 hover:bg-gray-100"
|
|
onClick={() => setShowAdminDropdown(false)}
|
|
>
|
|
Gestion des Objets Connectés
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header;
|