如何使用React和NextJS制作响应式菜单?

Question

如何使用React和NextJS制作响应式菜单?

我想这样当我按下一个按钮时，它会在菜单中添加另一个类叫做"open">，其余的由CSS来处理。

下面是一个例子:

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

Answer 1

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