From f5cb30e4ff2f2144c77501d307ba1f4efdd846f7 Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 15:52:33 +0200
Subject: [PATCH 1/6] Initial closed menu button.

---
 .../common/Navbar/MenuButton.module.css       | 25 +++++++++++++++++++
 components/common/Navbar/MenuButton.tsx       | 24 ++++++++++++++++++
 components/common/Navbar/Navbar.tsx           |  2 ++
 3 files changed, 51 insertions(+)
 create mode 100644 components/common/Navbar/MenuButton.module.css
 create mode 100644 components/common/Navbar/MenuButton.tsx

diff --git a/components/common/Navbar/MenuButton.module.css b/components/common/Navbar/MenuButton.module.css
new file mode 100644
index 000000000..7bdbf29e3
--- /dev/null
+++ b/components/common/Navbar/MenuButton.module.css
@@ -0,0 +1,25 @@
+.menuButton {
+  cursor: pointer;
+  height: 30px;
+  margin: 0 auto;
+  width: 30px;
+}
+
+.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);
+}
diff --git a/components/common/Navbar/MenuButton.tsx b/components/common/Navbar/MenuButton.tsx
new file mode 100644
index 000000000..7bc34ea43
--- /dev/null
+++ b/components/common/Navbar/MenuButton.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react'
+import PropTypes from 'prop-types'
+import s from './MenuButton.module.css'
+
+interface MenuButtonProps {
+    isOpen: boolean
+    onClick: any
+}
+
+const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={s.menuButton}
+    />
+  )
+}
+
+MenuButton.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+export default MenuButton
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index c3064585c..1286f251d 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
+import MenuButton from './MenuButton'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
 
@@ -35,6 +36,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
               ))}
             </nav>
           </div>
+          <MenuButton isOpen onClick={() => {}} />
           <div className="flex items-center justify-end flex-1 space-x-8">
             <UserNav />
           </div>

From dc365b92328fef9d17ab3f23f39a21c56c61f3c1 Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 15:57:48 +0200
Subject: [PATCH 2/6] Working menu button with open and closed state.

---
 .../common/Navbar/MenuButton.module.css       |  8 ++
 components/common/Navbar/MenuButton.tsx       |  7 +-
 components/common/Navbar/Navbar.tsx           | 78 ++++++++++---------
 3 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/components/common/Navbar/MenuButton.module.css b/components/common/Navbar/MenuButton.module.css
index 7bdbf29e3..ba8c18605 100644
--- a/components/common/Navbar/MenuButton.module.css
+++ b/components/common/Navbar/MenuButton.module.css
@@ -23,3 +23,11 @@
 .menuButton::before {
   transform: translateY(-5px);
 }
+
+.menuButton.isOpen::before {
+  transform: rotate(45deg);
+}
+
+.menuButton.isOpen::after {
+  transform: rotate(-45deg);
+}
diff --git a/components/common/Navbar/MenuButton.tsx b/components/common/Navbar/MenuButton.tsx
index 7bc34ea43..0de8f0ade 100644
--- a/components/common/Navbar/MenuButton.tsx
+++ b/components/common/Navbar/MenuButton.tsx
@@ -1,17 +1,18 @@
 import { FC } from 'react'
 import PropTypes from 'prop-types'
 import s from './MenuButton.module.css'
+import cn from 'classnames'
 
 interface MenuButtonProps {
-    isOpen: boolean
-    onClick: any
+  isOpen: boolean
+  onClick: any
 }
 
 const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
   return (
     <div
       onClick={onClick}
-      className={s.menuButton}
+      className={cn(s.menuButton, { [s.isOpen]: isOpen })}
     />
   )
 }
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index 1286f251d..492af69b4 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
@@ -14,43 +14,49 @@ interface NavbarProps {
   links?: Link[]
 }
 
-const Navbar: FC<NavbarProps> = ({ links }) => (
-  <NavbarRoot>
-    <div className={s.navContainer}>
-      <Container>
-        <div className={s.nav}>
-          <div className="flex items-center flex-1">
-            <Link href="/">
-              <a className={s.logo} aria-label="Logo">
-                <Logo />
-              </a>
-            </Link>
-            <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>
-          </div>
-          <MenuButton isOpen onClick={() => {}} />
-          <div className="flex items-center justify-end flex-1 space-x-8">
-            <UserNav />
-          </div>
-        </div>
-      </Container>
-    </div>
-    {process.env.COMMERCE_SEARCH_ENABLED && (
-      <div className={s.searchContainer}>
+const Navbar: FC<NavbarProps> = ({ links }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  return (
+    <NavbarRoot>
+      <div className={s.navContainer}>
         <Container>
-          <Searchbar />
+          <div className={s.nav}>
+            <div className="flex items-center flex-1">
+              <Link href="/">
+                <a className={s.logo} aria-label="Logo">
+                  <Logo />
+                </a>
+              </Link>
+              <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>
+            </div>
+            <MenuButton
+              isOpen={isMenuOpen}
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+            />
+            <div className="flex items-center justify-end flex-1 space-x-8">
+              <UserNav />
+            </div>
+          </div>
         </Container>
       </div>
-    )}
-  </NavbarRoot>
-)
+      {process.env.COMMERCE_SEARCH_ENABLED && (
+        <div className={s.searchContainer}>
+          <Container>
+            <Searchbar />
+          </Container>
+        </div>
+      )}
+    </NavbarRoot>
+  )
+}
 
 export default Navbar

From 530e90313efeec9a49bebe99b9c7b64f8ce717b4 Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 16:06:51 +0200
Subject: [PATCH 3/6] Extract out desktop nav menu.

---
 .../common/Navbar/DesktopNavMenu.module.css   | 11 ++++++++
 components/common/Navbar/DesktopNavMenu.tsx   | 28 +++++++++++++++++++
 .../common/Navbar/MenuButton.module.css       |  1 +
 components/common/Navbar/MenuButton.tsx       |  6 ----
 components/common/Navbar/Navbar.module.css    | 12 --------
 components/common/Navbar/Navbar.tsx           | 12 ++------
 6 files changed, 42 insertions(+), 28 deletions(-)
 create mode 100644 components/common/Navbar/DesktopNavMenu.module.css
 create mode 100644 components/common/Navbar/DesktopNavMenu.tsx

diff --git a/components/common/Navbar/DesktopNavMenu.module.css b/components/common/Navbar/DesktopNavMenu.module.css
new file mode 100644
index 000000000..5ec6a3098
--- /dev/null
+++ b/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;
+}
diff --git a/components/common/Navbar/DesktopNavMenu.tsx b/components/common/Navbar/DesktopNavMenu.tsx
new file mode 100644
index 000000000..8b62d808a
--- /dev/null
+++ b/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
diff --git a/components/common/Navbar/MenuButton.module.css b/components/common/Navbar/MenuButton.module.css
index ba8c18605..ac59c612b 100644
--- a/components/common/Navbar/MenuButton.module.css
+++ b/components/common/Navbar/MenuButton.module.css
@@ -3,6 +3,7 @@
   height: 30px;
   margin: 0 auto;
   width: 30px;
+  @apply lg:hidden;
 }
 
 .menuButton::after,
diff --git a/components/common/Navbar/MenuButton.tsx b/components/common/Navbar/MenuButton.tsx
index 0de8f0ade..4379a4e08 100644
--- a/components/common/Navbar/MenuButton.tsx
+++ b/components/common/Navbar/MenuButton.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import PropTypes from 'prop-types'
 import s from './MenuButton.module.css'
 import cn from 'classnames'
 
@@ -17,9 +16,4 @@ const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
   )
 }
 
-MenuButton.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-}
-
 export default MenuButton
diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css
index 1149d9ceb..433222767 100644
--- a/components/common/Navbar/Navbar.module.css
+++ b/components/common/Navbar/Navbar.module.css
@@ -15,18 +15,6 @@
   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;
 }
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index 492af69b4..4f3b0de1e 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
 import MenuButton from './MenuButton'
+import DesktopNavMenu from './DesktopNavMenu'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
 
@@ -27,16 +28,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                   <Logo />
                 </a>
               </Link>
-              <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>
+              <DesktopNavMenu links={links} />
             </div>
             <MenuButton
               isOpen={isMenuOpen}

From 22a9f4ffda7e90928b220f2ec5452a83517ac23a Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 16:12:55 +0200
Subject: [PATCH 4/6] Create inital toggling mobile nav menu.

---
 .../common/Navbar/MobileNavMenu.module.css    | 32 +++++++++++++++++++
 components/common/Navbar/MobileNavMenu.tsx    | 30 +++++++++++++++++
 components/common/Navbar/Navbar.tsx           |  2 ++
 3 files changed, 64 insertions(+)
 create mode 100644 components/common/Navbar/MobileNavMenu.module.css
 create mode 100644 components/common/Navbar/MobileNavMenu.tsx

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

From 5e19e3d727c8fb9ba3a914760346131e8c3a9f40 Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 17:43:38 +0200
Subject: [PATCH 5/6] Fix z-indexes.

---
 components/common/Navbar/MobileNavMenu.module.css | 1 -
 components/common/Navbar/Navbar.module.css        | 4 ++--
 components/common/Navbar/Navbar.tsx               | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/common/Navbar/MobileNavMenu.module.css b/components/common/Navbar/MobileNavMenu.module.css
index 09e748086..510b3401f 100644
--- a/components/common/Navbar/MobileNavMenu.module.css
+++ b/components/common/Navbar/MobileNavMenu.module.css
@@ -14,7 +14,6 @@
   transform: translateY(-100%);
   transition: transform 0.2s ease 0.1s, visibility 0.3s;
   visibility: hidden;
-  z-index: 2;
 }
 
 .navMenu.isOpen {
diff --git a/components/common/Navbar/Navbar.module.css b/components/common/Navbar/Navbar.module.css
index 433222767..674054128 100644
--- a/components/common/Navbar/Navbar.module.css
+++ b/components/common/Navbar/Navbar.module.css
@@ -3,7 +3,7 @@
 }
 
 .navContainer {
-  @apply bg-secondary;
+  @apply bg-secondary relative z-40;
   height: 50px;
 }
 .searchContainer {
@@ -11,7 +11,7 @@
 }
 
 .nav {
-  @apply relative flex flex-row justify-between;
+  @apply relative flex flex-row justify-between z-40;
   padding: 10px 0;
 }
 
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index ae4181852..571a3a4ea 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -29,7 +29,6 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
                   <Logo />
                 </a>
               </Link>
-              <MobileNavMenu links={links} isOpen={isMenuOpen} />
               <DesktopNavMenu links={links} />
             </div>
             <MenuButton
@@ -49,6 +48,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => {
           </Container>
         </div>
       )}
+      <MobileNavMenu links={links} isOpen={isMenuOpen} />
     </NavbarRoot>
   )
 }

From 2f632a32c56c477512a5d20c50c152399b5feaae Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 17:46:11 +0200
Subject: [PATCH 6/6] Style mobile menu links.

---
 components/common/Navbar/MobileNavMenu.module.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/components/common/Navbar/MobileNavMenu.module.css b/components/common/Navbar/MobileNavMenu.module.css
index 510b3401f..cada062c7 100644
--- a/components/common/Navbar/MobileNavMenu.module.css
+++ b/components/common/Navbar/MobileNavMenu.module.css
@@ -23,9 +23,5 @@
 }
 
 .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; */
+  @apply block;
 }