I am facing an issue where I want to close the menu when clicking on any menu item in React JS. The functionality works fine with a button icon but not with individual menu items. How can I resolve this problem? I have been trying to implement it using CSS properties. Please refer to the screenshot below for more information.
Even though it works perfectly on button click, the menu does not close when clicking on a specific item.
https://i.sstatic.net/1IzYF.png
Code:
import Link from 'next/link'
import Image from 'next/image'
import navbar from '/const/navbar'
import Button from '../button'
import { useState } from 'react'
export default function Navbar() {
const [activeClass, setActiveClass] = useState(0);
return (
<>
<nav>
<input id="nav-toggle" type="checkbox" />
<div className="logo">
<Link href="/">
<Image className=" cursor-pointer h-8 opacity-90" src="/workforwin-logo.png" width={172} height={44} alt="Workforwin Logo" />
</Link>
</div>
<ul className="links">
{/* Getting nav items */}
{navbar.data.map((items, i) => (
<li className={activeClass === i ? "text-indigo-600" : "hover:text-indigo-600"} key={i} onClick={() => setActiveClass(i)}><Link href={items.link}>{items.text}</Link></li>
))}
{/* Account Button */}
<Button link="" data="Account" type="" />
</ul>
<label htmlFor="nav-toggle" className="icon-burger">
<div className="line"></div>
<div className="line"></div>
<div className="line"></div>
</label>
</nav>
</>
)
}
CSS:
nav {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
padding: 0 4%;
height: 60px;
background-color: var(--secondary);
display: flex;
justify-content: space-between;
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
/* -webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px; */
}
nav .logo {
float: left;
width: 30%;
height: 100%;
display: flex;
align-items: center;
font-size: 28px;
color: #e4d7d5;
/* font-family: 'Courier New', Courier, monospace; */
}
nav .links {
/* float: right; */
padding: 0;
margin: 0;
width: 70%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
nav .links li {
list-style: none;
/* color: var(--text-primary); */
transition-delay: .1s;
transition-duration: 1s;
}
nav .links li:hover{
/* color: var(--text-secondary); */
transition-delay: .1s;
transition-duration: 1s;
}
nav .links a {
font-size: 16px;
font-weight: 600;
/* color: #603030; */
text-decoration: none;
padding: 10px 15px;
text-transform: uppercase;
text-align: center;
display: block;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 25px;
height: 4px;
background-color: var(--skyblue);
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
.btn-class{
text-decoration: none !important;
}