I'm trying to create a responsive navbar with a slider menu. I got everything working the way I want it to except for when maximizing the window (after closing the slide menu).

menu slider // Regular Responsive Nav {maximized window result after leaving menu slider open } // Responsive Nav {maximized window result after menu slider closed

    import "./App.css";
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { GiHamburgerMenu } from "react-icons/gi";
import ProfileButtons from "./components/ProfileButtons";

function App() {
  let [isMenuOpen, setIsMenuOpen] = useState(false);
  let [menu, setMenu] = useState("translateX(0%)");

  function openMenu() {
    setIsMenuOpen(!isMenuOpen);
    if (isMenuOpen === true) {
      setMenu("translateX(0%)");
    } else {
      setMenu("translateX(-100%)");
    }
  }

  return (
    <div className='container'>
      <nav className='navigation'>
        <div className='navburger'>
          <IconContext.Provider
            value={{
              color: "white",
              size: "1.2em",
              className: "global-class-name",
            }}
          >
            <GiHamburgerMenu onClick={openMenu} />
          </IconContext.Provider>
        </div>
        <div className='brand'>
          <h2>Chubbini</h2>
        </div>
        <ul className='nav-links' style={{ transform: menu }}>
          <li>
            <a href='/a'>About</a>
          </li>
          <li>
            <a href='/a'>Product</a>
          </li>
          <li>
            <a href='/a'>Inquiries</a>
          </li>
          <li>
            <a href='/a'>FAQ</a>
          </li>
          <ProfileButtons />
        </ul>
      </nav>
    </div>
  );
}

export default App;

I understand the problem, it's just I'm not sure how to reach my conclusion...unless there's an easier way or I have to not useState...

Thanks for helping!