diff --git a/components/common/Navbar/MobileNavMenu.module.css b/components/common/Navbar/MobileNavMenu.module.css new file mode 100644 index 000000000..09e748086 --- /dev/null +++ b/components/common/Navbar/MobileNavMenu.module.css @@ -0,0 +1,32 @@ +.navMenu { + @apply lg:hidden; + + background-color: #000; + bottom: 0; + color: #fff; + font-size: 2.333rem; + left: 0; + letter-spacing: -0.25px; + padding: 60px 1rem 40px; + position: fixed; + right: 0; + top: 50px; + transform: translateY(-100%); + transition: transform 0.2s ease 0.1s, visibility 0.3s; + visibility: hidden; + z-index: 2; +} + +.navMenu.isOpen { + transform: translateY(0); + transition-delay: 0s; + visibility: visible; +} + +.link { + /* @apply items-center transition ease-in-out duration-75 cursor-pointer text-accent-0 border-b-2 border-opacity-0; */ +} + +.link:hover { + /* @apply border-b-2 border-opacity-40; */ +} diff --git a/components/common/Navbar/MobileNavMenu.tsx b/components/common/Navbar/MobileNavMenu.tsx new file mode 100644 index 000000000..957d07992 --- /dev/null +++ b/components/common/Navbar/MobileNavMenu.tsx @@ -0,0 +1,30 @@ +import { FC } from 'react' +import s from './MobileNavMenu.module.css' +import Link from 'next/link' +import cn from 'classnames' + +interface Link { + href: string + label: string +} +interface MobileNavMenuProps { + links?: Link[] + isOpen: boolean +} + +const MobileNavMenu: FC = ({ links, isOpen }) => { + return ( + + ) +} + +export default MobileNavMenu diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx index 4f3b0de1e..ae4181852 100644 --- a/components/common/Navbar/Navbar.tsx +++ b/components/common/Navbar/Navbar.tsx @@ -4,6 +4,7 @@ import s from './Navbar.module.css' import NavbarRoot from './NavbarRoot' import MenuButton from './MenuButton' import DesktopNavMenu from './DesktopNavMenu' +import MobileNavMenu from './MobileNavMenu' import { Logo, Container } from '@components/ui' import { Searchbar, UserNav } from '@components/common' @@ -28,6 +29,7 @@ const Navbar: FC = ({ links }) => { +