push

assets/script/style.css

@@ -2135,11 +2135,7 @@ strong {
           > details
           > summary:not(.menu-title):not(.menu-active, :active, .btn):hover
       ) {
-      background-color: color-mix(
+      background-color: color-mix(in oklab, var(#e9f2ff) 10%, transparent);
-        in oklab,
-        var(--color-base-content) 10%,
-        transparent
-      );
     }
   }
   .menu
@@ -3990,12 +3986,33 @@ strong {
     padding-inline-end: 0.5rem;
     position: absolute;
     max-height: 500px;
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
   .menu-horizontal li {
     position: relative;
   }
 
+  .menu-horizontal li.active {
+    background: #e9f2ff !important;
+  }
+
+  .menu-horizontal li.active ul li.active {
+    background: #177bff !important;
+  }
+
+  .menu-horizontal li.active ul li.active a {
+    color: #fff;
+  }
+
+  .menu-horizontal li.active .grow {
+    color: #177bff;
+  }
+
+  .menu-horizontal li.active .iconify {
+    color: #177bff;
+  }
+
   .menu-horizontal li::before {
     position: absolute;
     content: "";
@@ -4036,7 +4053,8 @@ strong {
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     max-height: 500px;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
   }
 
   .menu-horizontal li:hover .submenu {
@@ -4050,6 +4068,13 @@ strong {
     display: block !important;
   }
 
+  .menu-horizontal li ul li:hover {
+    background: #177bff !important;
+  }
+  .menu-horizontal li ul li:hover a {
+    color: #fff;
+  }
+
   :where(.menu-horizontal > li:not(.menu-title) > details > ul) {
     border-radius: var(--radius-box);
     background-color: var(--color-base-100);

template/other/header.html

@@ -620,7 +620,8 @@
             {% assign _type = _category[0] %}
             {% assign _menuArray = _category[1].menu %}
             {% if _category[1].enable == 1 %}
-            <li>
+            <li
+                class="{%- for _item in _menuArray -%}{%- if _item.url == global.url -%} active  {%- endif -%} {%- endfor -%}">
                 <div class="flex items-center gap-3">
                     {% if _type == 'order' %}
                     <span class="iconify lucide--store tw-tsa"></span>
@@ -649,7 +650,8 @@
                 </div>
                 <ul class="p-2 submenu">
                     {% for _item in _menuArray %}
-                    <li><a href="{{ _item.url }}" style="white-space: nowrap">{{ _item.name }}</a></li>
+                    <li class="{% if _item.url == global.url %} active  {% endif %}"><a href="{{ _item.url }}"
+                            style="white-space: nowrap">{{ _item.name }}</a></li>
                     {% endfor %}
                 </ul>
             </li>