Reactjs带玻璃术的尾风导航杆在台式机模式下不显示NAV栏链接

Question

Navbar菜单项在移动视图和功能中显示在正确的功能中，但在桌面模式下，它们被隐藏了。我是逆风的初学者，所以感谢一些详细的答案，谢谢！

我正在与typecript一起使用React。

代码：-

import React, { useState } from 'react'
import CloseIcon from '../../assets/icons/close.svg';
import HamburgerMenuIcon from '../../assets/icons/hamburger-menu.svg';
export const HeaderBar = () => {

  const [toggle, setToggle] = useState(false);
  const links = [
    { name: "Home", link: "/" },
    { name: "About", link: "/" },
    { name: "Work", link: "/" },
    { name: "Experience", link: "/" },
    { name: "Contact", link: "/" }
  ]

  return (

    <div className='shadow-md w-full fixed top-0 left-0'>
      <div className='md:flex items:center justify-between bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm py-4  md:px-10 px-7'>
        <div className='font-bold text2xl cursor-pointer flex items-center font-[poppins] text-gray-800 bg-slate-900'>
          <span className='text-3xl'></span>
          Designer
        </div>

        <div className='text-3xl absolute right-8 top-6 md:hidden cursor-pointer' onClick={() => { setToggle(!toggle) }}>
          <img src={toggle ? CloseIcon : HamburgerMenuIcon} height={20} width={20} />
        </div>

        <ul className={` bg-white md:flex md:items-center md:pb-0 absolute md:static md:z-auto z-[-1] left-0 w-full md:w-auto bg-red-600  md:pl-0 pl-4 transition-all duration-500 ease-in-out ${toggle ? 'top-[55px] opacity-100' : '-top-[140px] opacity-0'} `}>
          {links.map((link) => {
            return (
              <li key={link.name} className='bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm  md:ml-8 text-md md:my-0 my-4 '>
                <a href={link.link} className='text-gray-800 hover:text-gray-400 duration:500'>
                  {link.name}
                </a>
              </li>
            )
          })}
        </ul>
      </div>
    </div >
  );
};

Answer 1

我发现这里的错误

${toggle ? 'top-[55px] opacity-100' : '-top-[140px] opacity-0'} `}>

应该更改为

${!toggle ? 'top-[55px] opacity-100' : '-top-[140px] opacity-0'} `}>