Untitled

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