抽屉关闭时有没有办法隐藏移动菜单链接？

Question

我有一个移动菜单，当isOpen = false 时使用剪辑路径隐藏它。但是，当在桌面上浏览网站时，它会浏览导航标题中的链接，在最后一个链接之后，它会开始浏览移动菜单中的隐藏链接。有没有办法完全隐藏链接或卸载组件？

import styled, { css } from 'styled-components'

import ActiveLink from '../utils/active-link'

const Menu = ({ isOpen, setOpen }) => {
  return (
    <MobileMenu open={isOpen}>
      <MobileMenuList>
        <li>
          <ActiveLink href='/' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              Home
            </MobileMenuLink>
          </ActiveLink>
        </li>
        <li>
          <ActiveLink href='/about' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              About
            </MobileMenuLink>
          </ActiveLink>
        </li>
        <li>
          <ActiveLink href='/blog' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              Blog
            </MobileMenuLink>
          </ActiveLink>
        </li>
        <li>
          <ActiveLink href='/podcast' activeClassName='active' passHref>
            <MobileMenuLink onClick={() => setOpen(!isOpen)}>
              Podcast
            </MobileMenuLink>
          </ActiveLink>
        </li>
      </MobileMenuList>
    </MobileMenu>
  )
}

export default Menu

const MobileMenu = styled.nav`
  ${({ theme, open }) => css`
    background: ${theme.colors.secondary};
    clip-path: ${open ? 'circle(100% at center)' : 'circle(0% at top right)'};
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    transition: clip-path 300ms linear;
  `}
`

Answer 1

<li>
  <ActiveLink href='/' activeClassName='active' passHref>
    <MobileMenuLink
      onClick={() => setOpen(!isOpen)}
      tabIndex={`${!isOpen ? '-1' : '1'}`}
     >
      Home
    </MobileMenuLink>
   </ActiveLink>
 </li>