есть ли способ скрыть ссылки мобильного меню, когда ящик закрыт? - PullRequest
Новая
       5

есть ли способ скрыть ссылки мобильного меню, когда ящик закрыт?

0 голосов
/ 28 мая 2020

У меня есть мобильное меню, которое я скрываю с помощью clip-path, когда 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;
  `}
`

1 Ответ

0 голосов
/ 28 мая 2020 
<li>
  <ActiveLink href='/' activeClassName='active' passHref>
    <MobileMenuLink
      onClick={() => setOpen(!isOpen)}
      tabIndex={`${!isOpen ? '-1' : '1'}`}
     >
      Home
    </MobileMenuLink>
   </ActiveLink>
 </li>
...