I am struggling to get my menu toggler to close on click - css

Question

I'm struggling to get my react menu toggler to close on click of a list item. For instance, once someone opens the menu I would like it to close when they click "about", "solutions", etc. Also for some reason, the entire menu is not opening on my phone but in dev tools mobile view it works fine. On mobile it's stuck at the top and only shows what seems to be a strip of the bottom of the menu but nothing more. Any reason this may be happening?
const [active, setActive] = useState("nav__menu");
const [icon, setIcon] = useState("nav__toggler");
const navToggle = () => {
if (active === "nav__menu") {
setActive("nav__menu nav__active");
} else setActive("nav__menu");
// Icon Toggler
if (icon === "nav__toggler") {
setIcon("nav__toggler toggle");
} else setIcon("nav__toggler");
};
return (
<div className="header">
<nav className="nav">
<Link className='nav-logo' to='/'>
<img src={NavLogo} alt="Home" className="nav-logo-img" />
</Link>
<ul className={active}>
<li className="nav__item">
<NavLink exact="true" to="/about">
<div className="nav-link">About</div>
</NavLink>
</li>
<li className="nav__item">
<NavLink exact="true" to="/solutions">
<div className="nav-link">Solutions</div>
</NavLink>
</li>
<li className="nav__item">
<Link to="/consultation" className='menu-consult-btn'>
<img src={BtnDroplet}className="btn-droplet" />
<h4>Free Consultation</h4>
</Link>
</li>
</ul>
<div onClick={navToggle} className={icon}>
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</div>
</nav>
</div>
);
/* Header Component */
.header{
width: 100%;
height: 100px;
background-color: var(--bg-color);
position: fixed;
z-index: 1000000000;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
margin: auto;
padding: 25px 0;
z-index: 999999;
}
.nav-logo-img{
width: 35%;
}
.nav__menu {
display: flex;
align-items: center;
gap: 2rem;
white-space: nowrap;
}
.nav__toggler {
display: none;
}
.nav__toggler div {
width: 2.5rem;
height: 0.2rem;
margin: 0.4rem;
background: var(--text-color);
transition: 0.3s ease-in;
}
/* Media Queries */
/* Header Component */
#media screen and (max-width: 900px) {
.nav__toggler {
display: block;
cursor: pointer;
z-index: 10;
background: none;
}
.nav__menu {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 100vw;
background: var(--sapphire);
flex-direction: column;
transform: translateX(100%);
transition: 0.5s ease-in;
z-index: 9;
padding: 0;
}
.nav__menu li:first-child{
margin-top: 125px;
}
.nav__menu li{
padding: 25px 0;
}
/* Active Class */
.nav__active {
transform: translateX(0%);
}
/* Toggle Icon Animation */
.toggle .line1 {
transform: rotate(-45deg) translate(-4px, 5px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-8px, -10px);
}
}
#media(max-width: 500px){
.nav{
padding: 25px 0;
}
.nav-logo-img{
width: 30%;
}
}