Change navigation links for better alignement
This commit is contained in:
Charles Mendiburu
parent
23a10672f4
commit
cc3c7001d9
@ -16,29 +16,27 @@ function Header() {
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="bg-white shadow-md ">
|
||||
<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>
|
||||
<header className="bg-white shadow-md relative">
|
||||
<div className="mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center sm:grid sm:grid-cols-3">
|
||||
{/* Logo Section */}
|
||||
<div className="flex justify-start">
|
||||
<Link to="/" className="text-2xl font-bold text-indigo-600">
|
||||
VigiMétéo
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Navigation Section (Centered on Desktop) */}
|
||||
<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`}
|
||||
} absolute z-[1000] top-16 left-0 w-full bg-white shadow-md sm:static sm:flex sm:justify-center sm:shadow-none sm:bg-transparent`}
|
||||
>
|
||||
<ul className="flex flex-col sm:flex-row gap-4 sm:gap-6 text-gray-600 p-4 sm:p-0">
|
||||
<ul className="flex flex-col sm:flex-row gap-4 sm:gap-10 text-gray-600 p-4 sm:p-0 font-medium">
|
||||
<li>
|
||||
<Link
|
||||
to="/"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-gray-600 hover:text-indigo-600"
|
||||
className="text-gray-600 hover:text-indigo-600 transition-colors"
|
||||
>
|
||||
{t('header.home')}
|
||||
</Link>
|
||||
@ -47,42 +45,21 @@ function Header() {
|
||||
<Link
|
||||
to="/about"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-gray-600 hover:text-indigo-600"
|
||||
className="text-gray-600 hover:text-indigo-600 transition-colors"
|
||||
>
|
||||
{t('header.about')}
|
||||
</Link>
|
||||
</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} />
|
||||
{t('header.login')}
|
||||
</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} />
|
||||
{t('header.signup')}
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
|
||||
{/* Logic for roles */}
|
||||
{token && (
|
||||
<>
|
||||
{user?.role === "user" ? (
|
||||
<li>
|
||||
<Link
|
||||
to="/gestionObjets"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-gray-600 hover:text-indigo-600"
|
||||
className="text-gray-600 hover:text-indigo-600 transition-colors"
|
||||
>
|
||||
{t('header.visualizer')}
|
||||
</Link>
|
||||
@ -92,17 +69,17 @@ function Header() {
|
||||
<Link
|
||||
to="/gestion"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="text-gray-600 hover:text-indigo-600"
|
||||
className="text-gray-600 hover:text-indigo-600 transition-colors"
|
||||
>
|
||||
{t('header.manage')}
|
||||
</Link>
|
||||
</li>
|
||||
)}
|
||||
{user?.role === "admin" && (
|
||||
<li className="relative">
|
||||
<li className="relative group">
|
||||
<button
|
||||
onClick={toggleAdminDropdown}
|
||||
className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none"
|
||||
className="flex items-center text-gray-600 hover:text-indigo-600 focus:outline-none transition-colors"
|
||||
>
|
||||
{t('header.admin')}
|
||||
<svg
|
||||
@ -139,7 +116,35 @@ function Header() {
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile-only auth links */}
|
||||
{!token ? (
|
||||
<>
|
||||
<li className="sm:hidden">
|
||||
<Link
|
||||
to="/login"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="hover:text-indigo-600 flex items-center gap-2"
|
||||
>
|
||||
<LogIn size={20} />
|
||||
{t('header.login')}
|
||||
</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"
|
||||
>
|
||||
<UserPlus size={20} />
|
||||
{t('header.signup')}
|
||||
</Link>
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<li className="sm:hidden">
|
||||
<Link
|
||||
to="/profil"
|
||||
@ -156,7 +161,7 @@ function Header() {
|
||||
logout();
|
||||
setIsMenuOpen(false);
|
||||
}}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-red-600"
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-red-600 w-full text-left"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>{t('header.logout')}</span>
|
||||
@ -164,48 +169,59 @@ function Header() {
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
<li></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{!token ? (
|
||||
<div className="hidden sm:flex gap-4 items-center">
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
to="/login"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="hover:text-indigo-600 flex items-center gap-2"
|
||||
>
|
||||
<LogIn size={20} />
|
||||
{t('header.login')}
|
||||
</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} />
|
||||
{t('header.signup')}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden sm:flex items-center gap-4">
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
to="/profil"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600"
|
||||
>
|
||||
<User size={20} />
|
||||
</Link>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-red-600"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span>{t('header.logout')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Auth Section (Right side) */}
|
||||
<div className="flex justify-end items-center gap-4">
|
||||
{!token ? (
|
||||
<div className="hidden sm:flex gap-4 items-center">
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-gray-600 hover:text-indigo-600 flex items-center gap-2 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<LogIn size={20} />
|
||||
{t('header.login')}
|
||||
</Link>
|
||||
<Link
|
||||
to="/signup"
|
||||
className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<UserPlus size={20} />
|
||||
{t('header.signup')}
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden sm:flex items-center gap-6">
|
||||
<LanguageSwitcher />
|
||||
<Link
|
||||
to="/profil"
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-indigo-600 transition-colors"
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
>
|
||||
<User size={20} />
|
||||
</Link>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<LogOut size={20} />
|
||||
<span className="font-medium">{t('header.logout')}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
className="sm:hidden text-gray-600 hover:text-indigo-600 focus:outline-none"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user