TH-6: Theme Editor > Mobile burger menu color is not configurable (#10)

youcan-shop · Aug 7, 2024 · 94376eb · 94376eb
1 parent d7b2853
commit 94376eb
Show file tree

Hide file tree

Showing 7 changed files with 219 additions and 42 deletions.
diff --git a/themes/aura/assets/navbar.css b/themes/aura/assets/navbar.css
@@ -92,11 +92,7 @@
     max-width: 120px;
   }
 }
-@media screen and (max-width: 767px) {
-  .yc-header .yc-navbar .menu, .yc-header .yc-navbar .menu-toggler {
-    height: 30px;
-  }
-}
+
 @media (min-width: 768px) {
   .yc-header .yc-navbar .menu-toggler {
     display: none;

diff --git a/themes/aura/sections/main-navbar.liquid b/themes/aura/sections/main-navbar.liquid
@@ -19,6 +19,22 @@
   .toggle-navbar {
     display: {{ section.settings.toggle_navbar ? 'none' : 'block' }};
   }
+
+  .menu .menu-toggler {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+    transform: scale(calc(var(--size) / 100));
+  }
+
+  .menu .menu-toggler ion-icon {
+    color: var(--color) !important;
+  }
 {% endstyle %}
 
 {% if section.settings.toggle_navbar != true %}
@@ -42,7 +58,19 @@
               </a>
             </div>
           {%- when 'menu' %}
-            <div class='menu'>
+            <div
+              class='menu'
+              style='
+                --background-color: {{ block.settings.navbar_menu_background_color.hex }};
+                --border-radius: {{ block.settings.navbar_menu_border_radius }}%;
+                --color:{%- if block.settings.navbar_menu_icon_color.hex -%}
+                          {{ block.settings.navbar_menu_icon_color.hex }}
+                        {%- else -%}
+                          var(--yc-nav-links-color)
+                        {%- endif -%};
+                --size: {{ block.settings.navbar_menu_size }};
+              '
+            >
               <button
                 class='menu-toggler text-3xl'
                 onclick="openDrawer('.navbar-drawer')"
@@ -113,25 +141,25 @@
         >
       </a>
     </div>
-      <form
-        action='/search'
-        method='GET'
-        class='mobile-search w-full flex gap-1 items-center'
-        >
-        <input
-          placeholder='{{ 'navbar.search.placeholder' | t }}'
-          type='text'
-          name='q'
-          value=''
-          class='w-full'
-        >
-        <button
-          type='submit'
-          aria-label='search'
-        >
-          <ion-icon name="search-outline" class="search-icon"></ion-icon>
-        </button>
-      </form>
+    <form
+      action='/search'
+      method='GET'
+      class='mobile-search w-full flex gap-1 items-center'
+    >
+      <input
+        placeholder='{{ 'navbar.search.placeholder' | t }}'
+        type='text'
+        name='q'
+        value=''
+        class='w-full'
+      />
+      <button
+        type='submit'
+        aria-label='search'
+      >
+        <ion-icon name="search-outline" class="search-icon"></ion-icon>
+      </button>
+    </form>
     <div class='flex flex-col items-wrapper'>
       {% for item in main-link-list.links %}
         <a
@@ -161,7 +189,40 @@
     {
       "label": "Menu",
       "limit": 1,
-      "type": "menu"
+      "type": "menu",
+      "settings": [
+        {
+          "type": "color",
+          "id": "navbar_menu_background_color",
+          "label": "Background color",
+          "default": "#00000000"
+        },
+        {
+          "type": "color",
+          "id": "navbar_menu_icon_color",
+          "label": "Icon color"
+        },
+        {
+          "type": "range",
+          "id": "navbar_menu_size",
+          "min": 1,
+          "step": 1,
+          "max": 200,
+          "unit": "%",
+          "label": "Size",
+          "default": 100
+        },
+        {
+          "type": "range",
+          "id": "navbar_menu_border_radius",
+          "min": 0,
+          "step": 1,
+          "max": 50,
+          "unit": "%",
+          "label": "Border radius",
+          "default": 0
+        }
+      ]
     },
     {
       "label": "Search and cart",

diff --git a/themes/harmony/assets/navbar.css b/themes/harmony/assets/navbar.css
@@ -105,11 +105,7 @@
     max-width: 120px;
   }
 }
-@media screen and (max-width: 767px) {
-  .yc-header .yc-navbar .menu, .yc-header .yc-navbar .menu-toggler {
-    height: 30px;
-  }
-}
+
 .yc-header .yc-navbar .menu-list {
   display: none;
   list-style: none;

diff --git a/themes/harmony/sections/main-navbar.liquid b/themes/harmony/sections/main-navbar.liquid
@@ -19,6 +19,22 @@
   .toggle-navbar {
     display: {{ section.settings.toggle_navbar ? 'none' : 'block' }};
   }
+
+  .menu .menu-toggler {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+    transform: scale(calc(var(--size) / 100));
+  }
+
+  .menu .menu-toggler ion-icon {
+    color: var(--color) !important;
+  }
 {% endstyle %}
 
 {% if section.settings.toggle_navbar != true %}
@@ -42,7 +58,19 @@
               </a>
             </div>
           {%- when 'menu' %}
-            <div class='menu'>
+            <div
+              class='menu'
+              style='
+                --background-color: {{ block.settings.navbar_menu_background_color.hex }};
+                --border-radius: {{ block.settings.navbar_menu_border_radius }}%;
+                --color:{%- if block.settings.navbar_menu_icon_color.hex -%}
+                          {{ block.settings.navbar_menu_icon_color.hex }}
+                        {%- else -%}
+                          var(--yc-neutral-color)
+                        {%- endif -%};
+                --size: {{ block.settings.navbar_menu_size }};
+              '
+            >
               <button
                 class='menu-toggler text-3xl'
                 onclick="openDrawer('.navbar-drawer')"
@@ -176,7 +204,40 @@
     {
       "label": "Menu",
       "limit": 1,
-      "type": "menu"
+      "type": "menu",
+      "settings": [
+        {
+          "type": "color",
+          "id": "navbar_menu_background_color",
+          "label": "Background color",
+          "default": "#00000000"
+        },
+        {
+          "type": "color",
+          "id": "navbar_menu_icon_color",
+          "label": "Icon color"
+        },
+        {
+          "type": "range",
+          "id": "navbar_menu_size",
+          "min": 1,
+          "step": 1,
+          "max": 200,
+          "unit": "%",
+          "label": "Size",
+          "default": 100
+        },
+        {
+          "type": "range",
+          "id": "navbar_menu_border_radius",
+          "min": 0,
+          "step": 1,
+          "max": 50,
+          "unit": "%",
+          "label": "Border radius",
+          "default": 0
+        }
+      ]
     },
     {
       "label": "Search and cart",

diff --git a/themes/meraki/assets/navbar.css b/themes/meraki/assets/navbar.css
@@ -175,7 +175,7 @@
 /* ----------------------------- */
 @media (min-width: 768px) {
   .hamburger {
-    display: none;
+    display: none !important;
   }
 }
 .hamburger .bar {

diff --git a/themes/meraki/sections/main-navbar.liquid b/themes/meraki/sections/main-navbar.liquid
@@ -1,7 +1,7 @@
 {{ 'navbar.css' | asset_url | stylesheet_tag }}
 
 {% style %}
-  :root{
+  :root {
     --yc-nav-height: {{ section.settings.navbar_height }}px;
     --yc-nav-background: {{ section.settings.navbar_background_color.hex }};
     --yc-nav-links-color: {%- if section.settings.navbar_links_color -%}
@@ -19,6 +19,22 @@
   .toggle-navbar {
     display: {{ section.settings.toggle_navbar ? 'none' : 'block' }};
   }
+
+  .menu #menuButton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+    transform: scale(calc(var(--size) / 100));
+  }
+
+  .menu #menuButton .bar {
+    background-color: var(--color);
+  }
 {% endstyle %}
 
 {% if section.settings.toggle_navbar != true %}
@@ -43,11 +59,25 @@
                 </a>
               </div>
             {%- when 'menu' %}
-              <div class='menu'>
-                <button id="menuButton" class='hamburger' aria-label='open menu'>
-                  <div class="bar"></div>
-                  <div class="bar"></div>
-                  <div class="bar"></div>
+              <div
+                class='menu'
+                style='
+                  --background-color: {{ block.settings.navbar_menu_background_color.hex }};
+                  --border-radius: {{ block.settings.navbar_menu_border_radius }}%;
+                  --color:{%- if block.settings.navbar_menu_icon_color.hex -%}
+                            {{ block.settings.navbar_menu_icon_color.hex }}
+                          {%- else -%}
+                            var(--yc-nav-links-color)
+                          {%- endif -%};
+                  --size: {{ block.settings.navbar_menu_size }};
+                '
+              >
+                <button id="menuButton" class='hamburger'>
+                  <div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                    <div class="bar"></div>
+                  </div>
                 </button>
                 <ul class='menu-list'>
                   {% for item in main-link-list.links %}
@@ -128,7 +158,40 @@
     {
       "label": "Menu",
       "limit": 1,
-      "type": "menu"
+      "type": "menu",
+      "settings": [
+        {
+          "type": "color",
+          "id": "navbar_menu_background_color",
+          "label": "Background color",
+          "default": "#00000000"
+        },
+        {
+          "type": "color",
+          "id": "navbar_menu_icon_color",
+          "label": "Icon color"
+        },
+        {
+          "type": "range",
+          "id": "navbar_menu_size",
+          "min": 1,
+          "step": 1,
+          "max": 200,
+          "unit": "%",
+          "label": "Size",
+          "default": 100
+        },
+        {
+          "type": "range",
+          "id": "navbar_menu_border_radius",
+          "min": 0,
+          "step": 1,
+          "max": 50,
+          "unit": "%",
+          "label": "Border radius",
+          "default": 0
+        }
+      ]
     },
     {
       "label": "Search and cart",

diff --git a/themes/meraki/styles/navbar.scss b/themes/meraki/styles/navbar.scss
@@ -207,7 +207,7 @@
 
 .hamburger {
   @include breakpoint('md') {
-    display: none;
+    display: none !important;
   }
 
   .bar {