Merge pull request #12 from sesamyab/danielgent/ch220/mobile-menu

Danielgent/ch220/mobile menu

components/common/Navbar/DesktopNavMenu.module.css

@@ -0,0 +1,11 @@
+.navMenu {
+  @apply hidden ml-6 space-x-4 lg:block;
+}
+
+.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/DesktopNavMenu.tsx

@@ -0,0 +1,28 @@
+import { FC,  } from 'react'
+import s from './DesktopNavMenu.module.css'
+import Link from 'next/link'
+
+interface Link {
+  href: string
+  label: string
+}
+interface DesktopNavMenuProps {
+  links?: Link[]
+}
+
+const DesktopNavMenu: FC<DesktopNavMenuProps> = ({ links }) => {
+  return (
+    <nav className={s.navMenu}>
+      <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 DesktopNavMenu

components/common/Navbar/MenuButton.module.css

@@ -0,0 +1,34 @@
+.menuButton {
+  cursor: pointer;
+  height: 30px;
+  margin: 0 auto;
+  width: 30px;
+  @apply lg:hidden;
+}
+
+.menuButton::after,
+.menuButton::before {
+  background-color: #f4f4f4;
+  content: '';
+  height: 1px;
+  position: absolute;
+  top: 50%;
+  transition: transform 0.2s ease;
+  width: 30px;
+}
+
+.menuButton::after {
+  transform: translateY(5px);
+}
+
+.menuButton::before {
+  transform: translateY(-5px);
+}
+
+.menuButton.isOpen::before {
+  transform: rotate(45deg);
+}
+
+.menuButton.isOpen::after {
+  transform: rotate(-45deg);
+}

components/common/Navbar/MenuButton.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import s from './MenuButton.module.css'
+import cn from 'classnames'
+
+interface MenuButtonProps {
+  isOpen: boolean
+  onClick: any
+}
+
+const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(s.menuButton, { [s.isOpen]: isOpen })}
+    />
+  )
+}
+
+export default MenuButton

components/common/Navbar/MobileNavMenu.module.css

@@ -0,0 +1,27 @@
+.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;
+}
+
+.navMenu.isOpen {
+  transform: translateY(0);
+  transition-delay: 0s;
+  visibility: visible;
+}
+
+.link {
+  @apply block;
+}

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.module.css

@@ -3,7 +3,7 @@
 }
 
 .navContainer {
-  @apply bg-secondary;
+  @apply bg-secondary relative z-40;
   height: 50px;
 }
 .searchContainer {
@@ -11,22 +11,10 @@
 }
 
 .nav {
-  @apply relative flex flex-row justify-between;
+  @apply relative flex flex-row justify-between z-40;
   padding: 10px 0;
 }
 
-.navMenu {
-  @apply hidden ml-6 space-x-4 lg:block;
-}
-
-.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;
-}
-
 .logo {
   @apply cursor-pointer;
 }

components/common/Navbar/Navbar.tsx

@@ -1,7 +1,10 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import Link from 'next/link'
 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'
 
@@ -13,7 +16,9 @@ interface NavbarProps {
   links?: Link[]
 }
 
-const Navbar: FC<NavbarProps> = ({ links }) => (
+const Navbar: FC<NavbarProps> = ({ links }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  return (
     <NavbarRoot>
       <div className={s.navContainer}>
         <Container>
@@ -24,17 +29,12 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
                   <Logo />
                 </a>
               </Link>
-            <nav className={s.navMenu}>
+              <DesktopNavMenu links={links} />
-              <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>
             </div>
+            <MenuButton
+              isOpen={isMenuOpen}
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            />
             <div className="flex items-center justify-end flex-1 space-x-8">
               <UserNav />
             </div>
@@ -48,7 +48,9 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
           </Container>
         </div>
       )}
+      <MobileNavMenu links={links} isOpen={isMenuOpen} />
     </NavbarRoot>
   )
+}
 
 export default Navbar