带有玻璃态的reactjs顺风导航条在桌面模式下不显示导航条链接

Question

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

​

​

​

​

我用的是反应打字本。

代码：-

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'} `}>