How to add animation to responsive Nav in React

Question

i want to add an animation or a transition when pressing the button to open de menu on the Nav. The button appears when the screen is small Here is the code

export const NavBar = () => {
  const [showNav, setShowNav] = useState(false);
  return (
    <>
      <nav className="flex items-center justify-between pl-8 pr-16 fixed w-full border-b-2 h-20 top-0 bg-white/30 backdrop-blur-sm">
        <img         src="https://res.cloudinary.com/dv8nczwtj/image/upload/v1684896617/Logo_jivlnb.png"
          alt="Logo"
          className="logo"
        />
        <div className="md:flex flex-row space-x-5 hidden">
          <a href="#" className="brand">
            Apple
          </a>
          <a href="#" className="brand">
            Samsung
          </a>
          <a href="#" className="brand">
            Xiaomi
          </a>
          <a href="#" className="brand">
            Google
          </a>
        </div>
        <button className="md:hidden" onClick={() => setShowNav(!showNav)}>
          <img
            src="https://res.cloudinary.com/dv8nczwtj/image/upload/v1684859901/menu_wh8ccz.png"
            alt="Menu"
            className="w-6"
          />
        </button>
        <CartWidget />
      </nav>
      {showNav && (
        <div className="flex fixed w-full flex-col justify-center items-center space-y-4 pb-2 border-b-2 border-black md:hidden bg-white/30 top-20 pt-4 backdrop-blur-sm">
          <a href="#" className="brand">
            Apple
          </a>
          <a href="#" className="brand">
            Samsung
          </a>
          <a href="#" className="brand">
            Xiaomi
          </a>
          <a href="#" className="brand">
            Google
          </a>
        </div>
      )}
    </>
  );
};

i tried adding transition to de Nav Mobil but didnt work. Im new to react so i need help. Thanks.

Answer 1

A way of doing this could be by first creating a function called toggleNav that does this:

 const toggleNav = () => {
    setShowNav(!showNav);
  };

Try to avoid writing inline function as sometimes can make the code a little bit messy (just a suggestion)

next add this showNav parameter to your code below

{showNav && (
        <div className="nav-menu">
          <div className="flex fixed w-full flex-col justify-center items-center space-y-4 pb-2 border-b-2 border-black md:hidden bg-white/30 top-20 pt-4 backdrop-blur-sm">
            <a href="#" className="brand">
              Apple
            </a>
            <a href="#" className="brand">
              Samsung
            </a>
            <a href="#" className="brand">
              Xiaomi
            </a>
            <a href="#" className="brand">
              Google
            </a>
          </div>
        </div>
      )}

If you want this only to be specifically applied when on small screens, you can modify your css file to something like this

@media (max-width: 767px) {
  .nav-menu {
    opacity: 0;
  }

Hope it helps!