Styling using tailwindCSS and React JS
Greetings! Can anyone tell me why my close menu image won't show up after I toggle my menu image?
PS- its functionality is correct maybe just the styling.
1 Reply
{toggleMenu && (
<div className="fixed top-0 left-0 w-[60%] h-screen bg-white z-10 pt-20 px-8">
<img
className="absolute top-4 left-6 z-50"
src={close}
alt="close"
width={15}
onClick={() => setToggleMenu(!toggleMenu)}
/>
<ul className="flex flex-col items-start gap-4">
{navLinks.map((link) => (
<li
key={link.label}
className="font-primary font-bold text-base text-veryDarkBlue"
>
<a href={link.href}>{link.label}</a>
</li>
))}
</ul>
</div>
)}
{toggleMenu && (
<div className="fixed top-0 left-0 w-[60%] h-screen bg-white z-10 pt-20 px-8">
<img
className="absolute top-4 left-6 z-50"
src={close}
alt="close"
width={15}
onClick={() => setToggleMenu(!toggleMenu)}
/>
<ul className="flex flex-col items-start gap-4">
{navLinks.map((link) => (
<li
key={link.label}
className="font-primary font-bold text-base text-veryDarkBlue"
>
<a href={link.href}>{link.label}</a>
</li>
))}
</ul>
</div>
)}
