Refactor header layout and optimize loading performance

eslint.config.mjs

@@ -9,12 +9,22 @@ export default [
       ecmaVersion: 2021,
       sourceType: 'module',
       globals: {
+        cancelAnimationFrame: 'readonly',
+        clearInterval: 'readonly',
+        clearTimeout: 'readonly',
         console: 'readonly',
-        window: 'readonly',
         document: 'readonly',
-        navigator: 'readonly',
+        getComputedStyle: 'readonly',
         localStorage: 'readonly',
-        sessionStorage: 'readonly'
+        navigator: 'readonly',
+        requestAnimationFrame: 'readonly',
+        requestIdleCallback: 'readonly',
+        ResizeObserver: 'readonly',
+        sessionStorage: 'readonly',
+        setInterval: 'readonly',
+        setTimeout: 'readonly',
+        URL: 'readonly',
+        window: 'readonly'
       }
     },
     rules: {

layout/theme.liquid

@@ -74,6 +74,8 @@
         }
       }
     </script>
-    <script type="module" src='{{ 'main.js' | asset_url }}'></script>
+
+    {% comment %} Non-critical JavaScript {% endcomment %}
+    <script type="module" src="{{ 'main.js' | asset_url }}"></script>
   </body>
 </html>

sections/header.liquid

@@ -82,35 +82,21 @@
 
   {%- if menu_opener_position == 'left' -%}
     --menu-indent-mobile: 0 20px 0 0;
-    --order-app-mobile: 3;
-    --order-button-mobile: 6;
-    --order-cart-mobile: 5;
-    --order-logo-mobile: 2;
-    --order-menu-mobile: 1;
-    --order-search-mobile: 4;
+    --menu-opener-position: left;
   {%- else -%}
     --menu-indent-mobile: 0 0 0 8px;
   {%- endif -%}
 
   {%- if menu_alignment_vertical == 'top' -%}
-    --logo-growth-desktop: 0;
-    --menu-growth-desktop: 1;
+    --menu-vertical-alignment: top;
     --menu-border-width-desktop: 0;
     --menu-bottom-border-top-width-desktop: 0;
     --menu-bottom-padding-top-desktop: 0;
-    --menu-bottom-width-desktop: auto;
     --menu-margin-x-desktop: auto;
     --menu-indent-desktop: 0 20px;
-    --order-app-desktop: 3;
-    --order-button-desktop: 6;
-    --order-cart-desktop: 5;
-    --order-logo-desktop: 1;
-    --order-menu-desktop: 2;
-    --order-search-desktop: 4;
   {%- else -%}
     --menu-bottom-border-top-width-desktop: 100vw;
     {%- if header_outline == "bordered" -%}
-      --menu-bottom-margin-desktop: {% if padding_bottom_desktop == 'lg' %}20px{% elsif padding_bottom_desktop == 'md' %}16px{% else %}12px{% endif %};
       --menu-bottom-border-top-width-desktop: calc(100% + var(--menu-bottom-margin-desktop) * 2);
     {%- endif -%}
     --menu-bottom-padding-top-desktop: {% if padding_bottom_desktop == 'lg' %}20px{% elsif padding_bottom_desktop == 'md' %}16px{% else %}12px{% endif %} 0 0;
@@ -211,21 +197,23 @@
     <div class="header__content{% if header_outline == 'bordered' %} header__content--outlined{%- endif -%}">
       {{- element_menu -}}
       {{- element_logo -}}
-      {{- element_app_desktop -}}
-      {{- element_search -}}
-      {%- if show_mini_cart -%}
-        <div class="header__cart">
-          {% comment %} CSS variables start {% endcomment %}
-          {%- render 'css-mini-cart-button' -%}
-          {% comment %} CSS variables end {% endcomment %}
+      <div class="header__icons">
+        {{- element_app_desktop -}}
+        {{- element_search -}}
+        {%- if show_mini_cart -%}
+          <div class="header__cart">
+            {% comment %} CSS variables start {% endcomment %}
+            {%- render 'css-mini-cart-button' -%}
+            {% comment %} CSS variables end {% endcomment %}
 
-          {{- cart_button -}}
-          <i class="fa-regular fa-spinner-third fa-spin"></i>
-        </div>
-      {%- endif -%}
-      {%- if show_button_desktop -%}
-        {{- element_button -}}
-      {%- endif -%}
+            {{- cart_button -}}
+            <i class="fa-regular fa-spinner-third fa-spin"></i>
+          </div>
+        {%- endif -%}
+        {%- if show_button_desktop -%}
+          {{- element_button -}}
+        {%- endif -%}
+      </div>
     </div>
   </div>
 </div>

src/js/utils.js

@@ -5,14 +5,6 @@
  * event handling, and component management.
  */
 
-/* eslint-env browser */
-/* global clearTimeout */
-/* global setTimeout */
-/* global requestAnimationFrame */
-/* global requestIdleCallback */
-/* global ResizeObserver */
-/* global getComputedStyle */
-
 /**
  * Debounce utility - limits function execution frequency
  */
@@ -135,7 +127,7 @@
 
   const register = (name, cleanupFn) => {
     if (typeof cleanupFn !== 'function') {
       console.warn(`Cleanup function for "${name}" is not a function`)
       return
     }
 
@@ -167,7 +159,7 @@
       try {
         cleanupFn()
       } catch (error) {
         console.warn(`Error cleaning up "${name}":`, error)
       }
     })
     cleanupFunctions.clear()

src/layout/theme.liquid

@@ -74,6 +74,8 @@
         }
       }
     </script>
-    <script type="module" src='{{ 'main.js' | asset_url }}'></script>
+
+    {% comment %} Non-critical JavaScript {% endcomment %}
+    <script type="module" src="{{ 'main.js' | asset_url }}"></script>
   </body>
 </html>

src/scss/_base/_base.scss

@@ -76,4 +76,8 @@ body {
       display: block;
     }
   }
+
+  .header:not(&:has(.header__inner--background)) & {
+    margin-top: var(--preview-height, 0);
+  }
 }

src/scss/_components/_logo.scss

@@ -15,6 +15,10 @@
     width: auto;
 
     &-holder {
+      height: 100%;
+      display: flex;
+      align-items: center;
+
       &--floated {
         position: absolute;
         top: 50%;

src/scss/_components/_menu.scss

@@ -87,7 +87,7 @@
     --menu-dropdown-opener-width: auto;
     --menu-dropdown-list-display: grid;
     --menu-dropdown-list-gap: 20px;
-    --menu-dropdown-list-padding: 25px #{$horizontal-padding};
+    --menu-dropdown-list-padding: #{$horizontal-padding-mobile};
     --menu-dropdown-wrapper-height: auto;
     --menu-dropdown-wrapper-margin: 0 auto;
     --menu-dropdown-wrapper-overflow: auto;
@@ -96,7 +96,7 @@
     --menu-dropdown-wrapper-transform: translateY(-100%);
     --menu-dropdown-wrapper-width: 100%;
     --menu-horizontal-position: var(--menu-horizontal-position-desktop, center);
-    --menu-item-margin: 0 22px;
+    --menu-item-margin: 0 12px;
     --menu-list-overflow: inherit;
     --menu-list-margin: calc(-1 * var(--menu-margin-top)) var(--menu-margin-x-desktop) calc(-1 * var(--menu-margin-bottom));
     --menu-list-width: calc(100% + -1 * var(--menu-margin-x-desktop, 0) * 2);
@@ -119,6 +119,11 @@
     --menu-wrapper-width: 100%;
   }
 
+  @include media-up(xl) {
+    --menu-dropdown-list-padding: 25px #{$horizontal-padding};
+    --menu-item-margin: 0 22px;
+  }
+
   path {
     stroke: var(--menu-opener-color);
     stroke-width: 1;
@@ -274,65 +279,6 @@
     }
   }
 
-  &__item {
-    display: grid;
-    grid-template-columns: 1fr min-content;
-    grid-template-areas: "item-1 item-2";
-    align-items: center;
-    margin: var(--menu-item-margin);
-    cursor: var(--menu-item-cursor);
-
-    @include media-up(md) {
-      height: 100%;
-    }
-
-    &-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: var(--menu-item-icon-margin);
-      transform: var(--menu-item-icon-transform);
-      transition: transform $transition-duration $transition-function;
-      pointer-events: none;
-    }
-
-    @include hover {
-      --menu-item-cursor: pointer;
-
-      .menu {
-        &__link {
-          @include media-up(md) {
-            color: $color-outline;
-          }
-        }
-
-        &__dropdown {
-          @include media-up(md) {
-            --menu-dropdown-events: all;
-          }
-
-          &-wrapper {
-            @include media-up(md) {
-              --menu-dropdown-wrapper-transform: translateY(0);
-            }
-          }
-
-          &-opener {
-            @include media-up(md) {
-              --menu-dropdown-opener-transform: rotate(270deg);
-            }
-
-            path {
-              @include media-up(md) {
-                --menu-opener-color: #{$color-outline};
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
   &__link {
     font-size: 18px;
     font-weight: $font-weight-bold;
@@ -350,6 +296,10 @@
       --menu-link-indent: 16px;
 
       @include media-up(md) {
+        --menu-link-indent: 5px;
+      }
+
+      @include media-up(xl) {
         --menu-link-indent: 10px;
       }
     }
@@ -371,6 +321,9 @@
     z-index: 2;
 
     &-list {
+      max-width: $max-width;
+      margin: var(--menu-dropdown-wrapper-margin);
+
       @include media-up(md) {
         padding: var(--menu-dropdown-list-padding);
         display: var(--menu-dropdown-list-display);
@@ -384,6 +337,10 @@
           --menu-dropdown-list-padding: 0;
           --menu-dropdown-list-gap: 0;
         }
+
+        @include media-up(xl) {
+          --menu-dropdown-list-padding: 0;
+        }
       }
     }
 
@@ -467,8 +424,6 @@
       width: var(--menu-dropdown-wrapper-width);
       height: var(--menu-dropdown-wrapper-height);
       max-height: calc(100vh - $header-height);
-      max-width: $max-width;
-      margin: var(--menu-dropdown-wrapper-margin);
       padding: var(--menu-dropdown-wrapper-padding);
       background: $background-primary;
       overflow: var(--menu-dropdown-wrapper-overflow);
@@ -550,6 +505,65 @@
     }
   }
 
+  &__item {
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    grid-template-areas: "item-1 item-2";
+    align-items: center;
+    margin: var(--menu-item-margin);
+    cursor: var(--menu-item-cursor);
+
+    @include media-up(md) {
+      height: 100%;
+    }
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: var(--menu-item-icon-margin);
+      transform: var(--menu-item-icon-transform);
+      transition: transform $transition-duration $transition-function;
+      pointer-events: none;
+    }
+
+    @include hover {
+      --menu-item-cursor: pointer;
+
+      .menu {
+        &__link {
+          @include media-up(md) {
+            color: $color-outline;
+          }
+        }
+
+        &__dropdown {
+          @include media-up(md) {
+            --menu-dropdown-events: all;
+          }
+
+          &-wrapper {
+            @include media-up(md) {
+              --menu-dropdown-wrapper-transform: translateY(0);
+            }
+          }
+
+          &-opener {
+            @include media-up(md) {
+              --menu-dropdown-opener-transform: rotate(270deg);
+            }
+
+            path {
+              @include media-up(md) {
+                --menu-opener-color: #{$color-outline};
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
   &:has([id^="header-dropdown-trigger-menu"]:checked),
   &:has([id*="header-dropdown-trigger-menu"]:checked) {
     /* stylelint-disable-next-line */