How to make a Responsive Menu with React and NextJS?

Issue

How to make a Responsive Menu with React and NextJS?

I want to make it so that when I press a button, it adds in the "menu" class another class called "open", the rest the CSS takes care of that.

Here’s an example:

.menu.open {
  height = calc(100vh - 70px);
}

Solution

const [open, setOpen] = React.useState(false)
return(
<main>
<div className={`menu ${open && "open"}`}>
menu code here...
</div>
<button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"} menu</button>
</main>
)

Answered By – Chad

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0