Having trouble getting the navigation bar to open. I have set it up so that when clicked, it should remove the hide-links tag, but for some reason, it does not toggle properly and keeps the ul hidden.
import React from "react";
import { NavLink } from 'react-router-dom';
import '../styles/navstyle.css'
import { MdMenu } from 'react-icons/md';
import { MdClose } from 'react-icons/md';
import { useState } from 'react';
export default function NavMenu () {
const [ open, setOpen ] = useState(false);
return(
<div className="nav">
<div className="moblie-menu-icon"
onClick={() => setOpen(!open)}
role="button"
>
<MdMenu />
</div>
<ul className={ !setOpen ? 'nav-links' : 'nav-links hide-links'}>
<div className="closeNavIcon"
onClick={() => setOpen(!open)}
role="button"
>
<MdClose />
</div>
<li className="link">
<NavLink to="/" exact>Home</NavLink>
</li>
<li className="link">
<NavLink to="/about">About</NavLink>
</li>
<li className="link">
<NavLink to="/projects">Projects</NavLink>
</li>
<li className="link">
<NavLink to="/contact">Contact</NavLink>
</li>
</ul>
</div>
);
}
Include the CSS if needed below:
.nav {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
padding: 1rem 0;
background-color: var(--dark-bg);
}
ul {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
width: 90%;
}
... (more CSS rules)
I've attempted various solutions like switching classes or adding a show-links class upon click, but none seem to achieve the desired result.