我想添加一個動畫或過渡時，按下按鈕打開導航菜單。 當屏幕較小時，該按鈕會出現 這是代碼

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>
      )}
    </>
  );
};

我嘗試添加過渡到德Nav Mobil，但沒有工作。 我是新來的，所以我需要幫助。 謝了。

一種方法是首先創建一個名為toggleNav的函數 這樣做:

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

盡量避免編寫內聯函數，因為有時會使代碼有點混亂(只是一個建議)

接下來，將這個showNav參數添加到下面的代碼中

{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>
      )}

如果你想只在小屏幕上應用，你可以修改你的css文件如下

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

希望有幫助！