点击链接时如何关闭全屏菜单

Question

我的问题是，当我单击主页链接时，此导航栏上没有任何反应，其他任何链接都可以正常工作。我希望菜单在每次单击链接后关闭。我得到了prop menuIsOpen，默认情况下为false。需要做第二个功能，否则我可以在CSS中做。感谢您的帮助。

 

    import styled from "styled-components";
    import MobileMenuList from "./MobileMenuList";
    import StyledButton from "../styles/Button";
    import Link from "next/link";

    const StyledNavbarMobile = styled.div`
      position: absolute;
      width: 100%;
      height: 100vh;
      background: ${props => props.theme.veryDark};
      visibility: hidden;
      opacity: 0;
      z-index: 2;
      overflow: hidden;
      text-align: center;
      transition: all 0.3s ease-in-out;
      transform: ${props =>
        props.menuIsOpen ? "translateX(0%)" : "translateX(100%)"};

      .mobile-menu-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 8rem;
        visibility: hidden;
        opacity: 0;

        @media (max-width: 768px) {
          visibility: ${props => (props.menuIsOpen ? "visible" : "hidden")};
          opacity: ${props => (props.menuIsOpen ? "1" : "0")};
        }

        a {
          font-size: 4rem;
          font-family: "MaverickStandard";
          color: ${props => props.theme.white};
        }
      }

      @media (max-width: 768px) {
        visibility: ${props => (props.menuIsOpen ? "visible" : "hidden")};
        opacity: ${props => (props.menuIsOpen ? "1" : "0")};

        a {
          font-family: "MaverickStandard";
        }
      }
    `;

    const StyledLogin = styled(StyledButton)`
      padding: 1rem 8rem 1rem 8rem;
      margin-top: 8rem;
      visibility: 0;
      opacity: 0;
      vertical-align: middle;
      text-align: center;

      @media (max-width: 768px) {
        visibility: ${props => (props.menuIsOpen ? "visible" : "hidden")};
        opacity: ${props => (props.menuIsOpen ? "1" : "0")};
      }
    `;

    const NavbarMobile = props => (
      <StyledNavbarMobile menuIsOpen={props.menuIsOpen}>
        <MobileMenuList />
        <StyledLogin
          size="4rem"
          color="#ffffff"
          borderSize="3px"
          menuIsOpen={props.menuIsOpen}
        >
          <Link href="/login">
            <a>LOGIN</a>
          </Link>
        </StyledLogin>
      </StyledNavbarMobile>
    );

    export default NavbarMobile;

这些是我导航栏中的链接。

import Link from "next/link";

const ManuList = props => {
  return (
    <ul className="mobile-menu-list">
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/gallery">
          <a>Gallery</a>
        </Link>
      </li>
      <li>
        <Link href="/articles">
          <a>Articles</a>
        </Link>
      </li>
      <li>
        <Link href="/contact">
          <a>Contact</a>
        </Link>
      </li>
    </ul>
  );
};

   export default ManuList;