导航链接被隐藏 - 反应

Question

我的导航链接在桌面/大型设备上水平显示，我刚刚为手机创建了一个汉堡菜单。问题是，当单击图标时，我使用反应挂钩来切换汉堡移动菜单上的链接，因此链接仅在菜单打开时显示，因此链接现在隐藏在较大的设备上，而不是水平显示。 基本上，导航项由移动汉堡菜单控制，即使在桌面上也应始终显示。

如何切换移动汉堡菜单的链接，同时让链接显示在更大的设备上？谢谢！

Navbar.js

const Navbar = ({ history, match }) => {
  const [openNavbar, setOpenNavbar] = useState(false)
  return (
    <ul className="navbar">
      <a className="navbar-brand" href="/">
        <img
          className="logo"
          src={logo}
          alt="Logo"
        />
      </a>
<span className="menu-icon" 
onClick={() => setOpenNavbar(!openNavbar)}>
      <FontAwesomeIcon size="lg" icon={faBars} />
      </span>
      {openNavbar && <div className="nav-links">
    {isAuthenticated() && (
        <li className="nav-item">
          <Link className="nav-link left-link" to={`/dashboard`}>
            Dashboard
          </Link>
        </li>
      )} 
   
      {isAuthenticated() && (
        <li className="nav-item">
          <WritePostLink />
        </li>
      )}
      
      {!isAuthenticated() && (
        <Fragment>
          <li className="nav-item">
            <Link className="nav-link" to="/signin">
              Sign In
            </Link>
          </li>
      )}

      {isAuthenticated() && (
        <li className="nav-item">
          <span
            className="nav-link"
            onClick={() =>
              signout(() => {
                history.push("/");
              })
            }>
            Sign Out
          </span>
        </li>
           
      )}
      </div>
          }
    </ul>     
  )}

SCSS

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-block;
  position: relative;
}

.logo {
  @include flex;
  justify-content: center;
  align-items: center;
}

.navbar {
  @include flex;
  width: 100vw;
  align-items: center;
}

/* hamburger menu - small devices */
@media only screen and (min-width: 600px) {
  .menu-icon {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .menu-icon {
    position: fixed;
    cursor: pointer;
    @include flex;
    flex-direction: row;
    align-items: right;
    margin-left: 80%;
  }
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .nav-links {
    margin-top: 130px;
    padding: 20px;
  }
  .nav-link {
    padding: 5px;
  }
}

Answer 1

除了切换.nav-links div 本身，您还可以切换一个类并仅在移动设备中使用 css 将其隐藏。

类似

{<div className={`nav-links ${openNavbar ? 'open' : ''}`}>...</div>}

在css中

@media only screen and (max-width: 768px) {
  .nav-links:not(.open) {
    display: none;
  }
}