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