From 21cc7275b4d2f4d3b8dc0854ef50c10c36a59686 Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Mon, 11 Apr 2022 09:17:41 -0300
Subject: [PATCH] Mobile Menu bugs (#28)

---
 .../common/header/header.module.scss          | 47 ++++++++++---------
 src/components/common/header/index.tsx        | 25 +++++++++-
 .../homepage/benefits/benefits.module.scss    |  2 +-
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/components/common/header/header.module.scss b/src/components/common/header/header.module.scss
index 16a62bf..dd60e09 100644
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@@ -1,14 +1,14 @@
 @import '~/css/helpers';
 
 .header {
-  position: fixed;
-  z-index: 20;
   display: flex;
+  position: fixed;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
-  padding: tovw(14px, 'default', 14px) var(--main-padding-side);
+  z-index: 20;
   background: rgb(4 4 4 / 0.01);
+  padding: tovw(14px, 'default', 12px) var(--main-padding-side);
+  width: 100%;
   backdrop-filter: blur(20px);
 
   nav {
@@ -35,13 +35,13 @@
       position: absolute;
       top: 50%;
       left: tovw(-16px, 'default', -16px);
+      transform: translateY(-50%);
+      transition: opacity var(--duration-normal) var(--ease);
+      opacity: 0;
+      background: var(--color-white);
       width: tovw(7px, 'default', 7px);
       height: tovw(7px, 'default', 7px);
       content: '';
-      transition: opacity var(--duration-normal) var(--ease);
-      transform: translateY(-50%);
-      opacity: 0;
-      background: var(--color-white);
     }
   }
 
@@ -57,20 +57,20 @@
 
   &__mobile {
     position: fixed;
-    z-index: 10;
-    top: tovw(75px, 'mobile');
+    top: var(--header-height-mobile);
     right: 0;
     bottom: 0;
     left: 0;
-    width: 100%;
-    height: calc(100 * var(--vh) - tovw(75px, 'mobile'));
-    padding: tovw(16px, 'mobile');
+    z-index: 10;
     background-color: var(--color-black);
     background-image: linear-gradient(
       180deg,
       rgb(0 0 244 / 0) 1.63%,
       rgb(0 0 244 / 0.9) 81.47%
     );
+    padding: tovw(16px, 'mobile');
+    width: 100%;
+    height: calc(100 * var(--vh) - var(--header-height-mobile));
 
     ul {
       flex-direction: column;
@@ -78,10 +78,10 @@
       padding: 0;
     }
 
-    a {
-      font-size: tovw(50px, 'mobile');
-      letter-spacing: tovw(-1px, 'mobile');
+    a:not(.button) {
       opacity: 0.6;
+      letter-spacing: tovw(-1px, 'mobile');
+      font-size: tovw(50px, 'mobile');
 
       @media screen and (max-height: 750px) {
         font-size: calc(var(--vh) * 5.2);
@@ -98,9 +98,10 @@
       display: block;
     }
 
-    button {
-      width: 100%;
+    .button {
       margin: tovw(59px, 'mobile') 0 tovw(44px, 'mobile') 0;
+      width: 100%;
+      text-align: center;
 
       @media screen and (max-height: 750px) {
         margin: calc(var(--vh) * 7.2) 0 calc(var(--vh) * 5.2) 0;
@@ -112,24 +113,24 @@
     }
 
     .social {
-      position: relative;
       display: grid;
+      position: relative;
       justify-content: center;
-      width: 100%;
       margin: tovw(32px, 'mobile') 0;
       padding-top: tovw(32px, 'mobile');
-      grid-template-columns: repeat(6, tovw(24px, 'mobile'));
+      width: 100%;
       gap: tovw(24px, 'mobile');
+      grid-template-columns: repeat(6, tovw(24px, 'mobile'));
 
       &::after {
         position: absolute;
         top: tovw(-32px, 'mobile');
         left: tovw(-16px, 'mobile');
+        margin: tovw(24px, 'mobile') 0;
+        background: white;
         width: calc(100% + tovw(32px, 'mobile'));
         height: tovw(1px, 'mobile', 1px);
-        margin: tovw(24px, 'mobile') 0;
         content: '';
-        background: white;
       }
 
       li,
diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx
index 9b0da7c..9b9a5bf 100644
--- a/src/components/common/header/index.tsx
+++ b/src/components/common/header/index.tsx
@@ -8,6 +8,7 @@ import { Logo } from '~/components/icons/logo'
 import { Button, ButtonLink } from '~/components/primitives/button'
 import Link from '~/components/primitives/link'
 import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
+import { useMeasure } from '~/hooks/use-measure'
 import { DURATION, gsap } from '~/lib/gsap'
 
 import { ConnectLinks } from '../footer/footer'
@@ -40,7 +41,7 @@ const HeaderMobile = React.forwardRef<
           ))}
       </ul>
       <ButtonLink
-        variant="interactive"
+        className={s['button']}
         href="https://discord.com/invite/ukhbBemyxY"
       >
         Join Us
@@ -66,9 +67,29 @@ export const Header = () => {
   const headerMobileRef = React.useRef<HTMLDivElement>(null)
   const timelineRef = React.useRef<GSAPTimeline>()
   const router = useRouter()
+  const [ref, bounds] = useMeasure()
 
   const isActive = (href: string) => router.pathname === href
 
+  React.useEffect(() => {
+    const handleRouteChange = () => {
+      setIsOpen(false)
+    }
+
+    router.events.on('routeChangeStart', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange)
+    }
+  }, [router])
+
+  useIsomorphicLayoutEffect(() => {
+    document.documentElement.style.setProperty(
+      '--header-height-mobile',
+      `${bounds.height.toString()}px`
+    )
+  }, [bounds])
+
   useIsomorphicLayoutEffect(() => {
     if (!headerMobileRef.current) return
 
@@ -104,7 +125,7 @@ export const Header = () => {
   }, [isOpen])
 
   return (
-    <header className={s.header}>
+    <header className={s.header} ref={ref}>
       <nav>
         <NextLink href="/">
           <a>
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index a90a1aa..1b7db00 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -74,7 +74,7 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
-  height: tovw(1582px, 'default', 900px);
+  height: tovw(1582px, 'default', 1050px);
 
   @include respond-to('mobile') {
     margin-top: tovw(-60px, 'mobile');