CODEWITHSUNDEEP
javascriptcssreactjs
Michael Horvilleur
Michael Horvilleur

Reputation: 149

change burger menu when click on link

In the code below, when I click on the burger menu, the design changes from burger to an X and the menu opens successfully. However, when I click on a link within the menu, the menu does close BUT the X menu does NOT change its design back to a burger.In other words, the menu closes but the css of the icon does not change back. Does anyone know what I am doing wrong?

  const handleClick = (event: any) => {
    if (!menuOpen) {
      event.currentTarget.classList.add("open");
      setMenu(true);
    } else {
      event.currentTarget.classList.remove("open");
      setMenu(false);
    }
  };

  <div className="mt-4 container page-container">
      <div className="row">
        <div className="d-grid gap-2 pb-3 col-4 mx-auto ">
          <div className="menu-btn" onClick={handleClick}>
            <div className="menu-btn_burger"></div>
          </div>
        </div>
      </div>
      {menuOpen && (
        <div className="row">
          <div className="d-grid gap-2 pt-3 col-6 mx-auto ">
            <Link to="/add" onClick={handleClick} className="btn btn-primary btn-sm  ">
              Add Task
            </Link>
            <Link to="/" onClick={handleClick} className="btn btn-primary btn-sm">
              All Reminders <span className="badge badge-light text-dark">{tasks.length > 0 && tasks.length}</span>
            </Link>
          </div>
        </div>}

Upvotes: 0

Views: 175

Answers (1)

myestery
myestery

Reputation: 125

The problem is from the event target

In the first case, the target is the div with class menu-button but in the second case, it is referring to the link element.

How to solve it?

Use Refs

const menuRef = useRef(null);
const handleClick = (event: any) => {
if (!menuOpen) {
  menuRef.current.classList.add("open");
  setMenu(true);
} else {
  menuRef.current.classList.remove("open");
  setMenu(false);
}
};


<div className="mt-4 container page-container">
  <div className="row">
    <div className="d-grid gap-2 pb-3 col-4 mx-auto ">
      <div ref={menuRef} className="menu-btn" onClick={handleClick}>
        <div className="menu-btn_burger"></div>
      </div>
    </div>
  </div>
  {menuOpen && (
    <div className="row">
      <div className="d-grid gap-2 pt-3 col-6 mx-auto ">
        <Link to="/add" onClick={handleClick} className="btn btn-primary btn-sm  ">
          Add Task
        </Link>
        <Link to="/" onClick={handleClick} className="btn btn-primary btn-sm">
          All Reminders <span className="badge badge-light text-dark">{tasks.length > 0 && tasks.length}</span>
        </Link>
      </div>
    </div>}

see more in the official docs React Ref

Upvotes: 1

Related Questions