function Nav(){
const [toggleStates, setToggleStates] = useState({
toggleDropDownAbout,
toggleDropDownCareers,
toggleDropDownNew
});
return(
<Link to='/' className='flex items-center text-slate-500 font-medium text-base px-3 py-3 nav-item hover:text-red-700 relative gap-1 '>About Us <FaCaretDown className='rotate'/></Link>
{toggleStates.toggleDropDownAbout &&
<ul className='grid pl-6 dropdown-item bg-red-100 lg:absolute top-12 z-10'>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>History</Link>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>Quality Policy</Link>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>Vision / Mission</Link>
</ul>
}
<Link to='/' className='flex items-center text-slate-500 font-medium text-base px-3 py-3 nav-item hover:text-red-700 relative gap-1 '>Careers <FaCaretDown className='rotate'/></Link>
{toggleStates.toggleDropDownCareers &&
<ul className='grid pl-6 dropdown-item bg-red-100 lg:absolute top-12 z-10'>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>History</Link>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>Quality Policy</Link>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>Vision / Mission</Link>
</ul>
}
<Link to='/' className='flex items-center text-slate-500 font-medium text-base px-3 py-3 nav-item hover:text-red-700 relative gap-1 '>Whats new <FaCaretDown className='rotate'/></Link>
{toggleStates.toggleDropDownNew &&
<ul className='grid pl-6 dropdown-item bg-red-100 lg:absolute top-12 z-10'>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>History</Link>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>Quality Policy</Link>
<Link to='/' className='text-slate-500 hover:text-red-700 text-base'>Vision / Mission</Link>
</ul>
}
)
}