Untitled
unknown
plain_text
a month ago
6.8 kB
1
Indexable
Never
import React, { useState, useEffect } from 'react' import logo from "../logo.svg" import { Link, useLocation } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBars, faGaugeHigh, faRightFromBracket, faTimes, faUser } from '@fortawesome/free-solid-svg-icons'; import { useAuth } from '../AuthContext'; import Loading from './Loading'; const Navbar = () => { const [isOpen, setOpen] = useState(false); const { user, logout, loading } = useAuth(); const location = useLocation(); const links = [ { name: "Home", href: "/" }, { name: "About", href: "/about" }, { name: "Flights", href: "/flights" }, { name: "Check-in & Booking", href: "/checkin" }, ] // Run this function whenever isOpen is changed. // *Resize the Navbar items according to screen size if screenSize > 1024px then set isOpen to false. useEffect(() => { // check if the screen width is >= 1024px and if its already open const handleResize = () => { if (isOpen && window.innerWidth >= 1024) { setOpen(false); } }; // Run handleResize function whenever the window changes. window.addEventListener('resize', handleResize); // remove the listen whenever the componenets unmount so no infinite function call! return () => { window.removeEventListener('resize', handleResize); }; }, [isOpen]); return ( <nav className='bg-white max-w-screen'> <div className="container mx-auto p-4 flex items-center justify-between"> <Link to="/" className="flex items-center justify-center gap-4"> <img src={logo} className='max-w-[55px]' alt="Logo" /> <h1 className='hidden md:block text-2xl text-orange-600 font-medium uppercase'>Tourism Office</h1> </Link> <div className="flex"> <button className='lg:hidden' onClick={() => setOpen(!isOpen)}> <FontAwesomeIcon className='text-3xl text-zinc-800' icon={isOpen ? faTimes : faBars} /> </button> <div className={`absolute lg:relative top-[75.7px] lg:top-0 left-0 w-full p-2 lg:p-0 bg-zinc-700/70 lg:bg-transparent backdrop-blur-sm lg:backdrop-blur-none h-full z-[999] ${isOpen ? "opacity-100 transform-none" : "opacity-0 lg:opacity-100 transform -translate-y-full invisible lg:flex lg:visible lg:transform-none"}`}> <ul className={`${isOpen ? "transition-all flex-col items-center justify-center bg-white w-full h-fit rounded-xl p-4" : "" } flex items-center `}> {links.map(({ name, href }, index) => ( <Link to={href} key={index} className={` hover:bg-orange-600/50 hover:border-orange-600 lg:hover:bg-white lg:hover:border-none hover:border-2 rounded-lg w-full lg:w-fit p-4 lg:px-4 lg:py-2 text-center duration-300 hover:text-orange-600 font-medium transition-all ${location.pathname === href ? "mx-2 bg-orange-600/50 border-orange-600 border-2 text-orange-600 lg:border-0 lg:rounded-none lg:border-b-2 lg:bg-transparent" : "text-zinc-600/90 "}`} id={index} > <li className='uppercase lg:text-sm'> {name} </li> </Link> ))} {loading ? (<Loading />) : user ? ( <> <button onClick={logout} className='py-4 mt-4 lg:mt-0 w-full lg:w-fit flex items-center justify-center lg:block px-4 uppercase font-medium text-sm lg:ml-4 transition-all duration-300 hover:bg-red-700 hover:border-red-700 bg-red-500 text-white border-red-500 border-2 rounded-md lg:py-2 relative'> <FontAwesomeIcon className='-rotate-180 text-lg lg:text-sm absolute lg:relative left-4 lg:left-0' icon={faRightFromBracket} /> <span className='block lg:hidden'>Logout</span> </button> {user.role === "admin" ? ( <Link to="/admin/countries" className='py-4 mt-4 lg:mt-0 w-full lg:w-fit flex items-center justify-center lg:block px-4 uppercase font-medium text-sm lg:ml-4 transition-all duration-300 hover:bg-orange-700 hover:border-orange-700 bg-orange-600 text-white border-orange-600 border-2 rounded-md lg:py-2 relative'> <FontAwesomeIcon className='text-lg lg:text-sm absolute lg:relative left-4 lg:left-0 lg:mr-2' icon={faGaugeHigh} /> <span>Dashboard</span> </Link> ) : ( <Link to="/profile" className='py-4 mt-4 lg:mt-0 w-full lg:w-fit flex items-center justify-center lg:block px-4 uppercase font-medium text-sm lg:ml-4 transition-all duration-300 hover:bg-orange-700 hover:border-orange-700 bg-orange-600 text-white border-orange-600 border-2 rounded-md lg:py-2 relative'> <FontAwesomeIcon className='text-lg lg:text-sm absolute lg:relative left-4 lg:left-0 lg:mr-2' icon={faUser} /> <span>My Account</span> </Link> )} </> ) : ( <> <Link to="/register" className='mt-4 lg:mt-0 py-4 w-full lg:w-fit px-4 uppercase font-medium text-sm text-orange-600 border-orange-600 border-2 rounded-md lg:py-2 hover:bg-orange-600 hover:text-white transition-all duration-300'> Register </Link> <Link to="/login" className='py-4 mt-4 lg:mt-0 w-full lg:w-fit px-4 uppercase font-medium text-sm lg:ml-4 transition-all duration-300 hover:bg-orange-700 hover:border-orange-700 bg-orange-600 text-white border-orange-600 border-2 rounded-md lg:py-2 '> Login </Link> </> )} </ul> </div> </div> </div> </nav> ) } export default Navbar
Leave a Comment