Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 3x 5x 5x 15x 5x 1x 1x | import { useState } from 'react';
import Link from 'next/link';
import { Menu as MenuIcon } from '@styled-icons/material/Menu';
import { Close as CloseIcon } from '@styled-icons/material/Close';
import { Logo, Footer } from 'components';
import { links } from './links';
import * as S from './styles';
const Menu = () => {
const [isOpen, setIsOpen] = useState(false);
const navLinks = links.map(link => (
<Link key={link.path} href={link.path} passHref>
<S.MenuLink>{link.label}</S.MenuLink>
</Link>
));
return (
<S.Container>
<Logo />
<S.MenuNav>{navLinks}</S.MenuNav>
<S.IconWrapper onClick={() => setIsOpen(true)}>
<MenuIcon aria-label="Open menu" />
</S.IconWrapper>
<S.MenuFull aria-hidden={!isOpen} isOpen={isOpen}>
<S.IconWrapper onClick={() => setIsOpen(false)}>
<CloseIcon aria-label="Close menu" />
</S.IconWrapper>
<S.MenuNav>{navLinks}</S.MenuNav>
<Footer />
</S.MenuFull>
</S.Container>
);
};
export { Menu };
|