80 lines
No EOL
3.3 KiB
TypeScript
80 lines
No EOL
3.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Link, useNavigate } from "react-router";
|
|
import useRoutes from "~/hooks/useRoutes";
|
|
import MobileDropdownMenu from "~/components/features/navbar/MobileDropdownMenu";
|
|
import { useAuth } from "~/context/AuthContext";
|
|
|
|
const NavBar = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const routes = useRoutes();
|
|
const navigate = useNavigate();
|
|
const {isAuthenticated, logout} = useAuth();
|
|
|
|
const handleLogout = (e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
logout();
|
|
navigate('/login', { replace: true });
|
|
};
|
|
|
|
return (
|
|
<nav className="border-b-2 border-secondary shadow-sm z-50 mb-8">
|
|
<div className="relative flex justify-between items-center px-4 lg:px-8 py-2 lg:container lg:mx-auto">
|
|
{/* Logo */}
|
|
<Link to={routes.home()} className="pt-2 text-2xl font-syncopate text-primary">
|
|
DISH PLANNER
|
|
</Link>
|
|
|
|
{/* Hamburger Menu - For Mobile View */}
|
|
{ isAuthenticated && (
|
|
<>
|
|
<button
|
|
className="text-primary w-8 h-8 md:hidden flex items-center justify-center"
|
|
onClick={() => setIsOpen(!isOpen)} // Toggle menu visibility
|
|
aria-label="Toggle menu"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex space-x-6">
|
|
<Link to={routes.home()} className="text-accent-blue hover:background-secondary">
|
|
Home
|
|
</Link>
|
|
<Link to={routes.dish.index()} className="text-accent-blue hover:background-secondary">
|
|
Dishes
|
|
</Link>
|
|
<Link to={routes.user.index()} className="text-accent-blue hover:background-secondary">
|
|
Users
|
|
</Link>
|
|
<Link to={routes.schedule.history()} className="text-accent-blue hover:background-secondary">
|
|
History
|
|
</Link>
|
|
<Link to={routes.auth.login()}
|
|
onClick={handleLogout}
|
|
className="text-primary text-right hover:background-secondary">
|
|
Logout
|
|
</Link>
|
|
</div>
|
|
|
|
<MobileDropdownMenu isOpen={isOpen} setIsOpen={setIsOpen} handleLogout={handleLogout} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default NavBar; |