Create inital toggling mobile nav menu.

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; */
+}

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<MobileNavMenuProps> = ({ links, isOpen }) => {
+  return (
+    <nav className={cn(s.navMenu, { [s.isOpen]: isOpen })}>
+      <Link href="/search">
+        <a className={s.link}>All</a>
+      </Link>
+      {links?.map((l) => (
+        <Link href={l.href} key={l.href}>
+          <a className={s.link}>{l.label}</a>
+        </Link>
+      ))}
+    </nav>
+  )
+}
+
+export default MobileNavMenu

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<NavbarProps> = ({ links }) => {
                   <Logo />
                 </a>
               </Link>
+              <MobileNavMenu links={links} isOpen={isMenuOpen} />
               <DesktopNavMenu links={links} />
             </div>
             <MenuButton