title: is there a way to hide mobile menu links when drawer is closed?
body: <p>I have a mobile menu that I hide using clip-path when <code>isOpen = false</code>. But when tabbing through site on desktop it tabs through the links in navigation header and after the last one, it starts going through hidden links from mobile menu. Is there a way to hide links or unmount component completely?</p>
  
  <pre><code>import styled, { css } from 'styled-components'
  
  import ActiveLink from '../utils/active-link'
  
  const Menu = ({ isOpen, setOpen }) =&gt; {
    return (
      &lt;MobileMenu open={isOpen}&gt;
        &lt;MobileMenuList&gt;
          &lt;li&gt;
            &lt;ActiveLink href='/' activeClassName='active' passHref&gt;
              &lt;MobileMenuLink onClick={() =&gt; setOpen(!isOpen)}&gt;
                Home
              &lt;/MobileMenuLink&gt;
            &lt;/ActiveLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ActiveLink href='/about' activeClassName='active' passHref&gt;
              &lt;MobileMenuLink onClick={() =&gt; setOpen(!isOpen)}&gt;
                About
              &lt;/MobileMenuLink&gt;
            &lt;/ActiveLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ActiveLink href='/blog' activeClassName='active' passHref&gt;
              &lt;MobileMenuLink onClick={() =&gt; setOpen(!isOpen)}&gt;
                Blog
              &lt;/MobileMenuLink&gt;
            &lt;/ActiveLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ActiveLink href='/podcast' activeClassName='active' passHref&gt;
              &lt;MobileMenuLink onClick={() =&gt; setOpen(!isOpen)}&gt;
                Podcast
              &lt;/MobileMenuLink&gt;
            &lt;/ActiveLink&gt;
          &lt;/li&gt;
        &lt;/MobileMenuList&gt;
      &lt;/MobileMenu&gt;
    )
  }
  
  export default Menu
  
  const MobileMenu = styled.nav`
    ${({ theme, open }) =&gt; 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;
    `}
  `
  </code></pre>