0

I have a mobile menu that I hide using clip-path when isOpen = false. 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?

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;
  `}
`
  • 1
    maybe you could set the tabIndex=-1 when !isOpen, be careful to ensure this doesn't remove the tabindexing permanently though as this is a critical accessibility feature. – Jon B May 28 at 3:38
  • 1
    @JonB That worked, I did the following: tabIndex={`${!isOpen ? '-1' : '1'}`} --- thank you – jgil May 28 at 15:03
0
0
<li>
  <ActiveLink href='/' activeClassName='active' passHref>
    <MobileMenuLink
      onClick={() => setOpen(!isOpen)}
      tabIndex={`${!isOpen ? '-1' : '1'}`}
     >
      Home
    </MobileMenuLink>
   </ActiveLink>
 </li>

| improve this answer | |
  • While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – SherylHohman May 29 at 2:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy365体育足球滚球比分

Not the answer you're looking for? Browse other questions tagged or ask your own question.