From 1363e427f0850cf9fd26a3c986514964f0637785 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <tyler.alsbury@shopify.com>
Date: Tue, 22 Mar 2022 13:42:47 -0400
Subject: [PATCH 1/9] Using font size and spacing for mega menu hierarchy

---
 assets/component-mega-menu.css | 6 ++++++
 sections/header.liquid         | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index d5a6a479dd8..68eecb2792a 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -49,6 +49,7 @@
 .mega-menu__link {
   color: rgba(var(--color-foreground), 0.75);
   display: block;
+  font-size: 1.2rem;
   line-height: calc(1 + 0.3 / var(--font-body-scale));
   padding-bottom: 0.8rem;
   padding-top: 0.8rem;
@@ -56,6 +57,11 @@
   transition: text-decoration var(--duration-short) ease;
 }
 
+.mega-menu__link--level-2:not(:only-child) {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+
 .header--top-center .mega-menu__list {
   display: flex;
   justify-content: center;
diff --git a/sections/header.liquid b/sections/header.liquid
index fffa9483b9f..fda2588805d 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -431,7 +431,7 @@
                         <ul class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}" role="list">
                           {%- for childlink in link.links -%}
                             <li>
-                              <a href="{{ childlink.url }}" class="mega-menu__link link font-body-bold{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
+                              <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                 {{ childlink.title | escape }}
                               </a>
                               {%- if childlink.links != blank -%}

From 7392c23c49223eb2efb3beeeb5a25f8cb3c22d13 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <tyler.alsbury@shopify.com>
Date: Thu, 24 Mar 2022 15:19:25 -0400
Subject: [PATCH 2/9] Adjusted link padding

---
 assets/component-mega-menu.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 68eecb2792a..00cd42de72c 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -51,8 +51,8 @@
   display: block;
   font-size: 1.2rem;
   line-height: calc(1 + 0.3 / var(--font-body-scale));
-  padding-bottom: 0.8rem;
-  padding-top: 0.8rem;
+  padding-bottom: 0.6rem;
+  padding-top: 0.6rem;
   text-decoration: none;
   transition: text-decoration var(--duration-short) ease;
 }

From 36f11130502b56b93fe9576e763e97b05fd6dd58 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <tyler.alsbury@shopify.com>
Date: Fri, 25 Mar 2022 13:29:18 -0400
Subject: [PATCH 3/9] Removed animation

---
 assets/component-mega-menu.css | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 00cd42de72c..9452b37c6ee 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -28,15 +28,8 @@
 }
 
 .mega-menu[open] .mega-menu__content {
-  animation: animateMenuOpen var(--duration-default) ease;
-  animation-fill-mode: forwards;
-}
-
-@media (prefers-reduced-motion) {
-  .mega-menu[open] .mega-menu__content {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  opacity: 1;
+  transform: translateY(0);
 }
 
 .mega-menu__list {

From 0e44a65d88b7b9c33206298da5375d9de0cf864a Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <tyler.alsbury@shopify.com>
Date: Mon, 28 Mar 2022 13:27:07 -0400
Subject: [PATCH 4/9] Fixed L2

---
 assets/component-mega-menu.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 9452b37c6ee..2ef7ac2856b 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -50,8 +50,11 @@
   transition: text-decoration var(--duration-short) ease;
 }
 
-.mega-menu__link--level-2:not(:only-child) {
+.mega-menu__link--level-2 {
   font-size: 1.4rem;
+}
+
+.mega-menu__link--level-2:not(:only-child) {
   margin-bottom: 1rem;
 }
 

From 2cf7a95c116b1355bf6817af78e70893d17484f4 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <tyler.alsbury@shopify.com>
Date: Tue, 29 Mar 2022 16:29:21 -0400
Subject: [PATCH 5/9] Adjustments from code review

---
 assets/component-mega-menu.css   | 3 ++-
 assets/component-menu-drawer.css | 1 +
 assets/details-disclosure.js     | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 2ef7ac2856b..39129b5c47c 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -48,6 +48,7 @@
   padding-top: 0.6rem;
   text-decoration: none;
   transition: text-decoration var(--duration-short) ease;
+  word-wrap: break-word;
 }
 
 .mega-menu__link--level-2 {
@@ -55,7 +56,7 @@
 }
 
 .mega-menu__link--level-2:not(:only-child) {
-  margin-bottom: 1rem;
+  margin-bottom: 0.8rem;
 }
 
 .header--top-center .mega-menu__list {
diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css
index c8c2b554b37..b488ce3f891 100644
--- a/assets/component-menu-drawer.css
+++ b/assets/component-menu-drawer.css
@@ -198,6 +198,7 @@ details[open].menu-opening > .menu-drawer__submenu {
   background-color: transparent;
   font-family: var(--font-body-family);
   font-style: var(--font-body-style);
+  text-align: left;
 }
 
 .no-js .menu-drawer__close-button {
diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
index 6fc6707c8c0..3c29c6ad611 100644
--- a/assets/details-disclosure.js
+++ b/assets/details-disclosure.js
@@ -39,6 +39,8 @@ class HeaderMenu extends DetailsDisclosure {
   }
 
   onToggle() {
+    document.body.classList.toggle('overflow-hidden', this.querySelectorAll('.mega-menu[open]').length);
+
     if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
     if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);
   }

From 775c7c0fbdd32f81cf0f7c1db3a6362c727c79b2 Mon Sep 17 00:00:00 2001
From: LucasLacerdaUX <lucas.lacerda@shopify.com>
Date: Thu, 31 Mar 2022 15:01:40 -0400
Subject: [PATCH 6/9] Prevent auto-hide when mega menu is open

---
 assets/component-mega-menu.css | 5 ++++-
 assets/details-disclosure.js   | 7 ++++---
 sections/header.liquid         | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index 39129b5c47c..ed08867ef8a 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -8,7 +8,6 @@
   border-radius: 0;
   border-right: 0;  
   left: 0;
-  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
   overflow-y: auto;
   padding-bottom: 2.4rem;
   padding-top: 2.4rem;
@@ -18,6 +17,10 @@
   z-index: -1;
 }
 
+.shopify-section-header-sticky .mega-menu__content {
+  max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem);
+}
+
 .header-wrapper--border-bottom .mega-menu__content {
   border-top: 0;
 }
diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
index 3c29c6ad611..6f4d9bac03b 100644
--- a/assets/details-disclosure.js
+++ b/assets/details-disclosure.js
@@ -35,14 +35,15 @@ customElements.define('details-disclosure', DetailsDisclosure);
 class HeaderMenu extends DetailsDisclosure {
   constructor() {
     super();
-    this.header = document.querySelector('header');
+    this.header = document.querySelector('.header-wrapper');
   }
 
   onToggle() {
-    document.body.classList.toggle('overflow-hidden', this.querySelectorAll('.mega-menu[open]').length);
+    if (!this.header) return;
+    this.header.preventHide = !!this.querySelectorAll('.mega-menu[open]').length;
 
     if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
-    if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);
+    document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);    
   }
 }
 
diff --git a/sections/header.liquid b/sections/header.liquid
index fda2588805d..f3b34930430 100644
--- a/sections/header.liquid
+++ b/sections/header.liquid
@@ -618,6 +618,7 @@
       if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
 
       if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
+        if (this.preventHide) return;
         requestAnimationFrame(this.hide.bind(this));
       } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
         if (!this.preventReveal) {
@@ -635,7 +636,6 @@
         requestAnimationFrame(this.reset.bind(this));
       }
 
-
       this.currentScrollTop = scrollTop;
     }
 

From 4d0d8a73d50e7e52980d12d94dc147716f0f0abf Mon Sep 17 00:00:00 2001
From: LucasLacerdaUX <lucas.lacerda@shopify.com>
Date: Thu, 31 Mar 2022 15:21:45 -0400
Subject: [PATCH 7/9] :facepalm:

---
 assets/details-disclosure.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
index 6f4d9bac03b..8c76c546ca7 100644
--- a/assets/details-disclosure.js
+++ b/assets/details-disclosure.js
@@ -43,7 +43,7 @@ class HeaderMenu extends DetailsDisclosure {
     this.header.preventHide = !!this.querySelectorAll('.mega-menu[open]').length;
 
     if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
-    document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);    
+    document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);
   }
 }
 

From 51defb685c0dfd1c12d40855c893b238569e0e29 Mon Sep 17 00:00:00 2001
From: Lucas Lacerda <37168033+LucasLacerdaUX@users.noreply.github.com>
Date: Thu, 31 Mar 2022 17:09:37 -0400
Subject: [PATCH 8/9] Prevent auto-hiding on dropdown menus

---
 assets/details-disclosure.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js
index 8c76c546ca7..cc12836bcd0 100644
--- a/assets/details-disclosure.js
+++ b/assets/details-disclosure.js
@@ -40,7 +40,7 @@ class HeaderMenu extends DetailsDisclosure {
 
   onToggle() {
     if (!this.header) return;
-    this.header.preventHide = !!this.querySelectorAll('.mega-menu[open]').length;
+    this.header.preventHide = this.mainDetailsToggle.open;
 
     if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
     document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`);

From 60a31a7f2fde52743a5bf6037e7102e7fb324e18 Mon Sep 17 00:00:00 2001
From: Tyler Alsbury <tyler.alsbury@shopify.com>
Date: Fri, 1 Apr 2022 13:31:31 -0400
Subject: [PATCH 9/9] Switched to 1.03

---
 assets/component-mega-menu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
index ed08867ef8a..d233a3afb5b 100644
--- a/assets/component-mega-menu.css
+++ b/assets/component-mega-menu.css
@@ -45,7 +45,7 @@
 .mega-menu__link {
   color: rgba(var(--color-foreground), 0.75);
   display: block;
-  font-size: 1.2rem;
+  font-size: 1.3rem;
   line-height: calc(1 + 0.3 / var(--font-body-scale));
   padding-bottom: 0.6rem;
   padding-top: 0.6rem;