Navbar.jsx

import React, {useState} from 'react'
import { MenuIcon, XIcon} from '@heroicons/react/outline'
import { Link } from "react-router-dom"

{/* <li><Link to="/president">Pres</Link></li> */}



const Navbar = () => {
    const [nav, setNav] = useState(false)
    const handleClick = () => setNav(!nav)

    const handleClose =()=> setNav(!nav)

  return (
    <div name='navbar' className='w-screen h-[80px] z-10 bg-zinc-200 fixed drop-shadow-lg'>
        <div className='px-2 flex justify-between items-center w-full h-full'>
            <div className='flex items-center'>
                <h1 className='text-3xl font-bold mr-4 sm:text-4xl'>Club Champions</h1>
                <ul className='hidden md:flex'> 
                                            {/* Navigation*/}
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/club">Club</Link></li>
                <li><Link to="/description">Description</Link></li>
                <li><Link to="/support">Support</Link></li>
                </ul>

            </div>
            <div className='hidden md:flex pr-4'> 
                <button className='border-none bg-transparent text-black mr-4'> Sign In </button>
                <button className='px-8 py-3'> Sign Up</button>
            </div>
            <div className='md:hidden mr-4' onClick={handleClick}>
                {!nav ? <MenuIcon className='w-5'/> : <XIcon className='w-5'/>}
            </div> 
        </div>
                        {/* Navigation for mobile device*/}
             <ul className={!nav ? 'hidden' : 'absolute bg-zinc-400 w-full px-8'}>
                <li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/" smooth={true} duration={500}>Home</Link></li>
                <li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/about" smooth={true} offset={-500} duration={500}>About</Link></li>
                <li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/club" smooth={true} offset={-100} duration={500}>Club</Link></li>
                <li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/description" smooth={true} offset={50} duration={500}>Description</Link></li>
                <li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="/support" smooth={true} offset={50} duration={500}>Support</Link></li> 
                


                <div className='flex flex-col my-4'>
                    <button className='bg-transparent text-indigo-600 px-8 py-3 mb-4'>Sign In</button>
                    <button className='px-8 py-3'>Sign Up</button>
                </div>
        </ul>


    </div>
  )
}

export default Navbar