如何在 nextjs 应用程序的导航栏上从左到右添加 Animation？

Question

I have a navbar and sidebar component in my nextjs app. In my index component I'm using useState to show and hide sidebar on mobile device.
It works perfectly fine but I want to add animation when user clicks on hamburger menu, the sidebar should be animated left to right and when clicked on close icon it should go back to right to left. FYI I am using tailwind css.

Here's the code:
indexjs file:

export default function Home() {
 const [sidebar, setSidebar] = useState(false);
return(
<>
        <Navbar sidebar={sidebar} setSidebar={setSidebar} />
        {sidebar ? (
          <div className={sidebar ? "transform-x-0" : "transform-x-full"}>
            <Sidebar sidebar={sidebar} setSidebar={setSidebar} />
          </div>
        ) : null}
</>

)

Navbar.js:

const Navbar = ({ sidebar, setSidebar }) => {
  return (
    <div>
      <header className="px-4 max-w-desktop mx-auto text-blacklight">
        <nav
          className="
          flex
          lg:flex-row
          items-center
          flex-auto
          justify-between
          lg:mx-auto
          md:py-6
          py-4
          relative
          navigation
        "
          id="navigation"
        >
          <div className="flex flex-row items-center">
            <img src="./assets/logo.svg" alt="fab systems" />
            <h2 className="text-lg font-extrabold flex-none ml-1 leading-none">
              FAB <br />
              SYSTEMS
            </h2>
          </div>
          <ul
            className="
            lg:flex lg:flex-row
            flex-col
            max-w-full
            lg:w-2/3
            mt-4
            lg:mt-0
            hidden
            lg:items-center
            justify-between
            flex-none
          "
          >
            <li className="menu-links">
              <a href="./features.html">Features</a>
            </li>
            <li className="menu-links">
              <a href="./pricing.html">Pricing</a>
            </li>
            <li className="menu-links">
              <a href="./customer-result.html">Customer Results</a>
            </li>
            <li className="menu-links">
              <a href="./about.html">About</a>
            </li>
            <li className="menu-links">
              <a href="#">Blog</a>
            </li>
            <li className="menu-links">
              <a href="#">Support</a>
            </li>
            <div className="flex flex-col">
              <li
                className="
                menu-links
                bg-dark-blue
                py-2
                rounded-full
                text-white
                font-semibold
                px-4
              "
              >
                <a href="#">Free Demo</a>
              </li>
              <p className="absolute right-0 w-screen text-right bottom-0 text-sm">
                or call sales
                <a href="https://twitter.com/" className="text-blue">
                  +91 982-488-5838
                </a>
              </p>
            </div>
          </ul>
          <div className="lg:hidden">
            <svg
              className="w-8 h-8 lg:hidden"
              id="hamburger"
              onClick={() => setSidebar(true)}
              fill="none"
              stroke="#354650"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            </svg>
          </div>
        </nav>
      </header>
    </div>
  );
};

export default Navbar;

Sidebar.js:

import React from "react";

const Sidebar = ({ sidebar, setSidebar }) => {
  const hideSidebar = () => {
    setSidebar(!sidebar);
  };

  return (
    <div
      className="
        overflow-x-hidden
        min-h-screen
        absolute
        z-50
        bg-dark-green
        lg:px-12
        px-4
        md:py-6
        py-4
        transform
        left-0
        w-screen
        transition
        duration-300
        top-0
      "
      id="mobile-nav"
    >
      <div className="flex flex-row justify-between items-center">
        <div>
          <img src="./assets/logo.svg" alt="fab systems" />
        </div>
        <svg
          className="w-8 h-8 lg:hidden mr-2"
          id="close"
          onClick={hideSidebar}
          fill="none"
          stroke="#FFFFFF"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </div>
      <ul className="text-xl text-white my-4">
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./features.html">Features</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./pricing.html">Pricing</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./customer-result.html">Customer Results</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="./about.html">About</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="#">Blog</a>
        </li>
        <li className="menu-links py-4 border-gray-600 border-b-2">
          <a href="#">Support</a>
        </li>
        <li className="menu-links py-4">
          <a href="#">Free Demo</a>
        </li>
      </ul>
      <div className="relative py-1 w-screen flex flex-row pr-4">
        <input
          type="email"
          className="
            p-2
            px-3
            border-gray-400
            rounded-tl rounded-bl
            border
            text-sm
            relative
            max-w-full
            w-full
          "
          placeholder="Enter your phone"
        />
        <button
          className="
            py-2
            text-white
            rounded-tr-full rounded-br-full
            bg-dark-blue
            text-sm
            px-4
            mr-4
            sm:w-1/4
            w-1/2
            border border-blue-600
            -ml-2
          "
        >
          Try Free Demo
        </button>
      </div>
    </div>
  );
};

export default Sidebar;

Answer 1

Can you try this?

<div className={`sidebar ${sidebar ? "transform-x-0" : "transform-x-full"}`}>

And give .sidebar transition?