React Bulma mobile nav bar is not working as expected

user_7603484 0
Viewed 426

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.

bulma react-hooks reactjs css
1 Answers

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.

user_121714740
Related