1const [isActive, setisActive] = React.useState(false);
2<nav className="navbar" role="navigation" aria-label="main navigation">
3 <div className="navbar-brand">
4 <a
5 onClick={() => {
6 setisActive(!isActive);
7 }}
8 role="button"
9 className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
10 aria-label="menu"
11 aria-expanded="false"
12 data-target="navbarBasicExample"
13 >
14 <span aria-hidden="true"></span>
15 <span aria-hidden="true"></span>
16 <span aria-hidden="true"></span>
17 </a>
18 </div>
19 <div
20 id="navbarBasicExample"
21 className={`navbar-menu ${isActive ? "is-active" : ""}`}
22 >
23 <div className="navbar-start">
24 <a className="navbar-item">Home</a>
25 <a className="navbar-item">Documentation</a>
26 </div>
27 </div>
28 </nav>
29