Add mega menu (Shopify#1316)

* Simplify header dropdown menu CSS selectors

* Create popup utility class to apply popup global settings styles

* Add mega menu settings to header section. Add en locale. Add mega menu liquid as snippet. Add mega menu css

* Fix indent

* Add info to menu type setting

* Remove condition for showing dropdown menus for subcategories with no children

* Force zero border-radius and top/bottom border for mega menu container since it's full width

* Update 1 translation file

* Prevent mega menu shadows from overlapping header by reducing menu content z-index. Clean up unused CSS

* Add todo

* Show mega menu top border only if header does not have separator line enabled

* Remove empty line

* Update 16 translation files

* Update 3 translation files

* Remove mega menu snippet since contents are not being re-used. Add mega menu liquid in header directly instead

* Update assets/component-mega-menu.css

Co-authored-by: MM <martina.marien@shopify.com>

* Rename utility class

* Add mega menu content layout and styles (Shopify#1338)

* Add grid for mega menu content and styles for links

* Remove role="list" from ul elements since list is ul elements' default role

* Adjust link styles

* Set mega menu content max height based on viewport height. Use header bottom position set in JS for calculation

* Round position value down instead of up to be more consistent with other instances where --header-bottom-position value is set in JS

* Fix spacing

* Change level 2 link color to better distinguish from level 3 links

* Revert mega menu heading opacity to improve color contrast

* Merge branch 'add-mega-menu' of https://github.com/Shopify/dawn into add-mega-menu-content

* Add id to mega menu content container (JS will use id to add aria-control attribute to summary element). Add role="list" to ul in mega menu for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role)

* Fix typo

* Combine css properties for same class

* Set mega menu links to display block to ensure bigger touch target

* Add some bottom offset to menu max-height to prevent iOS Safari from cutting off bottom of menu

* Update link style (remove uppercase) for 2nd level links that have no children

* Update L2 link font to bold. Use Liquid to calculate bold font-weight value: "bold" will be +300 relative to default body font-weight, but restricted to max of 1000

* Address feedback. Add explicit role="list" for a11y (when list bullets are removed some assistive technologies may not convey ul as list without explicit role)

* Use rem instead of px

* Remove redundant css

* Update line height to account for body scale

* Move JS to set header bottom position CSS variable to its own custom HTML component. This is to ensure this snippet of JS does not run if not needed

* Remove usage of --viewport-height since its value may not have been set

* Update references (in JS and CSS) to details-disclosure to also account for header-menu which extends details-disclosure

* Update logic to set  --header-bottom-position-desktop value when menu is toggled, instead of in constructor. This ensures the header is visible when the value is calculated

Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Co-authored-by: MM <martina.marien@shopify.com>

assets/base.css

@@ -2150,12 +2150,22 @@ details[open] > .header__icon--menu .icon-hamburger {
   transform: scale(1.07);
 }
 
-.header__inline-menu details[open] > .header__submenu {
-  opacity: 1;
-  transform: translateY(0);
+.js details > .header__submenu {
+  opacity: 0;
+  transform: translateY(-1.5rem);
+}
+
+details[open] > .header__submenu {
   animation: animateMenuOpen var(--duration-default) ease;
-  max-height: 75vh;
-  overflow-y: scroll;
+  animation-fill-mode: forwards;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion) {
+  details[open] > .header__submenu {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Header menu */
@@ -2227,6 +2237,15 @@ details[open] > .header__icon--menu .icon-hamburger {
     transform var(--duration-default) ease;
 }
 
+.global-settings-popup,
+.header__submenu.global-settings-popup {
+  border-radius: var(--popup-corner-radius);
+  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
+  border-style: solid;
+  border-width: var(--popup-border-width);
+  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow), var(--popup-shadow-opacity));
+}
+
 .header__submenu.list-menu {
   padding: 2rem 0;
 }
@@ -2257,6 +2276,7 @@ details[open] > .header__icon--menu .icon-hamburger {
   right: 2rem;
 }
 
+header-menu > details,
 details-disclosure > details {
   position: relative;
 }
@@ -2432,15 +2452,138 @@ details-disclosure > details {
    text-align: left;
    }
 
-   a img{
-     -moz-transition-duration:0.2s;
-     -o-transition-duration:0.2s;
-     -webkit-transition-duration:0.2s;
-    transition-duration:0.2s;
-   }
-   a img:hover{
-    opacity:0.9;
-   }
-#gorgias-chat-container iframe#chat-button { right: 22px }
-#gorgias-chat-container iframe#chat-window { right: 0 }
-#gorgias-chat-container iframe#chat-campaigns { right: 0 }
+.ratio::before {
+  content: '';
+  width: 0;
+  height: 0;
+  padding-bottom: var(--ratio-percent);
+}
+
+.content-container {
+  border-radius: var(--text-boxes-radius);
+  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
+  position: relative;
+}
+
+.content-container:after {
+  content: '';
+  position: absolute;
+  top: calc(var(--text-boxes-border-width) * -1);
+  right: calc(var(--text-boxes-border-width) * -1);
+  bottom: calc(var(--text-boxes-border-width) * -1);
+  left: calc(var(--text-boxes-border-width) * -1);
+  border-radius: var(--text-boxes-radius);
+  box-shadow: var(--text-boxes-shadow-horizontal-offset)
+    var(--text-boxes-shadow-vertical-offset)
+    var(--text-boxes-shadow-blur-radius)
+    rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
+  z-index: -1;
+}
+
+.content-container--full-width:after {
+  left: 0;
+  right: 0;
+  border-radius: 0;
+}
+
+@media screen and (max-width: 749px) {
+  .content-container--full-width-mobile {
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+  }
+  .content-container--full-width-mobile:after {
+    display: none;
+  }
+}
+
+.global-media-settings {
+  position: relative;
+  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
+  border-radius: var(--media-radius);
+  overflow: visible !important;
+  background-color: rgb(var(--color-background));
+}
+
+.global-media-settings:after {
+  content: '';
+  position: absolute;
+  top: calc(var(--media-border-width) * -1);
+  right: calc(var(--media-border-width) * -1);
+  bottom: calc(var(--media-border-width) * -1);
+  left: calc(var(--media-border-width) * -1);
+  border-radius: var(--media-radius);
+  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity));
+  z-index: -1;
+}
+
+.global-media-settings--no-shadow {
+  overflow: hidden !important;
+}
+
+.global-media-settings--no-shadow:after {
+  content: none;
+}
+
+.global-media-settings img,
+.global-media-settings iframe,
+.global-media-settings model-viewer,
+.global-media-settings video {
+  border-radius: calc(var(--media-radius) - var(--media-border-width));
+}
+
+.content-container--full-width,
+.global-media-settings--full-width,
+.global-media-settings--full-width img {
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+}
+
+/* check for flexbox gap in older Safari versions */
+@supports not (inset: 10px) {
+  .grid {
+    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
+  }
+
+  .grid__item {
+    padding-left: var(--grid-mobile-horizontal-spacing);
+    padding-bottom: var(--grid-mobile-vertical-spacing);
+  }
+
+  @media screen and (min-width: 750px) {
+    .grid {
+      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
+    }
+
+    .grid__item {
+      padding-left: var(--grid-desktop-horizontal-spacing);
+      padding-bottom: var(--grid-desktop-vertical-spacing);
+    }
+  }
+
+  .grid--gapless .grid__item {
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+
+  @media screen and (min-width: 749px) {
+    .grid--peek .grid__item {
+      padding-left: var(--grid-mobile-horizontal-spacing);
+    }
+  }
+
+  .product-grid .grid__item {
+    padding-bottom: var(--grid-mobile-vertical-spacing);
+  }
+
+  @media screen and (min-width: 750px) {
+    .product-grid .grid__item {
+      padding-bottom: var(--grid-desktop-vertical-spacing);
+    }
+  }
+}
+
+.font-body-bold {
+  font-weight: var(--font-body-weight-bold);
+}

assets/cart-notification.js

@@ -69,7 +69,7 @@ class CartNotification extends HTMLElement {
   handleBodyClick(evt) {
     const target = evt.target;
     if (target !== this.notification && !target.closest('cart-notification')) {
-      const disclosure = target.closest('details-disclosure');
+      const disclosure = target.closest('details-disclosure, header-menu');
       this.activeElement = disclosure ? disclosure.querySelector('summary') : null;
       this.close();
     }

assets/component-mega-menu.css

@@ -0,0 +1,67 @@
+.mega-menu {
+  position: static;
+}
+
+.mega-menu__content {
+  background-color: rgb(var(--color-background));
+  border-left: 0;
+  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;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: -1;
+}
+
+.header-wrapper--border-bottom .mega-menu__content {
+  border-top: 0;
+}
+
+.js .mega-menu__content {
+  opacity: 0;
+  transform: translateY(-1.5rem);
+}
+
+.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);
+  }
+}
+
+.mega-menu__list {
+  display: grid;
+  gap: 2.4rem 4rem;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  list-style: none;
+}
+
+.mega-menu__link {
+  color: rgba(var(--color-foreground), 0.75);
+  display: block;
+  line-height: calc(1 + 0.3 / var(--font-body-scale));
+  padding-bottom: 0.8rem;
+  padding-top: 0.8rem;
+  text-decoration: none;
+  transition: text-decoration var(--duration-short) ease;
+}
+
+.mega-menu__link:hover,
+.mega-menu__link--active {
+  color: rgb(var(--color-foreground));
+  text-decoration: underline;
+}
+
+.mega-menu__link--active:hover {
+  text-decoration-thickness: 0.2rem;
+}

assets/details-disclosure.js

@@ -19,3 +19,17 @@ class DetailsDisclosure extends HTMLElement {
 }
 
 customElements.define('details-disclosure', DetailsDisclosure);
+
+class HeaderMenu extends DetailsDisclosure {
+  constructor() {
+    super();
+    this.header = document.querySelector('header');
+  }
+
+  onToggle() {
+    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`);
+  }
+}
+
+customElements.define('header-menu', HeaderMenu);

layout/theme.liquid

@@ -92,6 +92,7 @@
         --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
         --font-body-style: {{ settings.type_body_font.style }};
         --font-body-weight: {{ settings.type_body_font.weight }};
+        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
 
         --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
         --font-heading-style: {{ settings.type_header_font.style }};

locales/cs.schema.json

@@ -687,23 +687,18 @@
           "label": "Zobrazit plovoucí záhlaví",
           "info": "Záhlaví zůstane zobrazené na obrazovce, přestože zákazníci skrolují dál."
         },
-        "color_scheme": {
+        "margin_bottom": {
+          "label": "Dolní okraj"
+        },
+        "menu_type_desktop": {
+          "label": "Typ desktopové nabídky",
+          "info": "Typ nabídky se automaticky optimalizuje pro mobilní prostředí.",
           "options__1": {
-            "label": "Zvýraznění 1"
+            "label": "Rozevírací nabídka"
           },
           "options__2": {
-            "label": "Zvýraznění 2"
-          },
-          "options__3": {
-            "label": "Pozadí 1"
-          },
-          "options__4": {
-            "label": "Pozadí 2"
-          },
-          "options__5": {
-            "label": "Inverze"
-          },
-          "label": "Barevné schéma"
+            "label": "Mega nabídka"
+          }
         }
       }
     },

locales/da.schema.json

@@ -687,23 +687,18 @@
           "label": "Aktivér fastgjort sidehoved",
           "info": "Sidehovedet vises på skærmen, når kunderne ruller op."
         },
-        "color_scheme": {
+        "margin_bottom": {
+          "label": "Nederste margen"
+        },
+        "menu_type_desktop": {
+          "label": "Computermenutype",
+          "info": "Menutypen optimeres automatisk til mobil.",
           "options__1": {
-            "label": "Markering 1"
+            "label": "Rullemenu"
           },
           "options__2": {
-            "label": "Markering 2"
-          },
-          "options__3": {
-            "label": "Baggrund 1"
-          },
-          "options__4": {
-            "label": "Baggrund 2"
-          },
-          "options__5": {
-            "label": "Omvendt"
-          },
-          "label": "Farveskema"
+            "label": "Megamenu"
+          }
         }
       }
     },