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);
}

CodePudding user response：

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>
)