导航链接被隐藏 - 反应

Question

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

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

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

您可以切换 class 并仅在移动设备中使用 css 隐藏它，而不是切换 .nav-links div 本身。

类似

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

并在 css

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

导航链接被隐藏 - 反应

nav links are hidden - react

css

responsive-design

reactjs