I want to create a hamburger menu for a website for small screens, I use useState to set a variable to false by default then making an onClick function for a button which changes the useState variable and toggling the div with the menu items hidden and visible. The problem is although I have made the variable false when the page is reloaded the menu appears is there something I could do to fix that or should I go about this in another way.
Here is my code
export default function NavBar() {
const [toggleMenu, setToggleMenu] = useState(false);
const viewMenu = () => {
setToggleMenu(!toggleMenu)
}
return (
<>
<div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
<div>
<button onClick={viewMenu} className="text-xl btn">
<BiMenuAltLeft />
</button>
</div>
<div>
<button className="text-2xl btn btn-ghost">MEDFITS</button>
</div>
<div>
<button className="p-2 text-xl btn"><VscAccount /></button>
<button className="p-2 text-xl btn"><BiSearchAlt /></button>
</div>
</div>
<div className={`w-fit bg-base-200 mx-10 rounded-md ${toggleMenu && "hidden" }`}>
<ul className="p-4 text-center">
<li><a className="btn btn-wide" href="/">HOME</a></li>
<li><a className="btn btn-wide" href="/about">ABOUT</a></li>
<li><a className="btn btn-wide" href="/shop">SHOP</a></li>
<li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
</ul>
</div>
</>
I tried looking in the console for clues as to what is the problem but I didn’t find anything.
2
Answers
To Fix this problem I just changed the default value of the
toggleMenu
to trueI think your code is correct but I think you should apply the toggle logic to the
<ul>
container as well. I also prefer to use ternary operators while giving conditional classnames to the components.Here’s my implementation: