React Bulma mobile nav bar is not working as expected - css

Question

When I click the button to toggle the mobile nav bar it's not working. I am using Bulma css framework with react. Here is the React nav bar component:
onst Header = (props) => {
const dispatch = useDispatch()
const { loginUser, isAuthenticated, history, errors } = props;
const dropdownRef = useRef(null);
const [isActive, setIsActive] = useDetectOutsideClick(dropdownRef, false);
const [isMobileActive, setisMobileActive] = useState(false);
const onClick = () => setIsActive(!isActive);
const onLogout = () => {
dispatch(logout())
}
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
onClick={() => {
setisMobileActive(!isMobileActive)
}}
role="button"
className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-end">
<a className="navbar-item">Dashboard</a>
<div
onClick={onClick}
ref={dropdownRef}
className={`navbar-item has-dropdown ${
isActive ? "is-active" : ""
}`}
>
<a className="navbar-link">Account</a>
<div className="navbar-dropdown is-right">
<a className="navbar-item">Account settings</a>
<a className="navbar-item">Set Job filters</a>
<a className="navbar-item">Report an issue</a>
<a className="navbar-item" onClick={onLogout}>Log out</a>
</div>
</div>
</div>
</div>
</nav>
);
};
The most bottom part with dropdown is for desktop nav bar. What is missing for mobile toggle menu. How can I fix it? Who I click the toggle button nothing happens.

Answer 1

I‘m not familiar with React, but on the bulma side you need to toggle the class is-active on both the navbar-burger and the targeted navbar-menu.
There are implementation examples in Bulma navbar documentation, personally I'm using the jQuery implementation which works perfectly :
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
but there's also a Vanilla Javascript implementation in the docs if you want.