update menu

assets/script/pc_style.css

@@ -156,7 +156,7 @@ a {
 .admin-menu-container {
   position: relative;
   overflow: auto;
-  background: #004e99;
+  background: #004180;
   color: #fff;
   width: 18%;
   padding: 20px 0;
@@ -174,7 +174,7 @@ a {
   height: 22px;
 }
 .admin-menu-container .menu-list {
-  margin: 50px 0;
+  margin: 50px 5px;
 }
 .admin-menu-container details[open] svg {
   transform: rotate(90deg);
@@ -214,15 +214,17 @@ a {
 .admin-menu-container .item {
   display: flex;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 12px;
   line-height: 36px;
   transition: 0.3s all;
   border-radius: 4px;
+  background: #004e99;
+  margin-bottom: 4px;
 }
-.admin-menu-container .item:hover {
+.admin-menu-container .item:hover, .admin-menu-container .item.active {
-  background: #81b5e4;
+  background: #22a2ff;
 }
-.admin-menu-container .item:hover .icons {
+.admin-menu-container .item:hover .icons, .admin-menu-container .item.active .icons {
   filter: brightness(100);
 }
 .admin-menu-container .item .icons {
@@ -237,15 +239,6 @@ a {
   padding: 13px 13px 13px 45px;
   position: relative;
 }
-.admin-menu-container .sub-menu::before {
-  content: "";
-  width: 1px;
-  height: calc(100% - 39px);
-  background: #79b0e2;
-  position: absolute;
-  left: 20px;
-  top: 20px;
-}
 .admin-menu-container .sub-menu a {
   display: block;
   margin-bottom: 15px;
@@ -258,16 +251,6 @@ a {
   font-weight: 700;
   text-decoration: none;
 }
-.admin-menu-container .sub-menu a::before {
-  content: "";
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #79b0e2;
-  position: absolute;
-  top: 6px;
-  left: -28px;
-}
 .admin-menu-container .sub-menu a:last-child {
   margin: 0;
 }

assets/script/pc_style.scss

@@ -134,7 +134,7 @@ a {
 .admin-menu-container {
     position: relative;
     overflow: auto;
-    background: #004e99;
+    background: #004180;
     color: #fff;
     width: 18%;
     padding: 20px 0;
@@ -151,7 +151,7 @@ a {
         }
     }
     .menu-list {
-        margin: 50px 0;
+        margin: 50px 5px;
     }
     details {
         &[open] {
@@ -195,12 +195,15 @@ a {
     .item {
         display: flex;
         align-items: center;
-        padding: 0 16px;
+        padding: 0 12px;
         line-height: 36px;
         transition: 0.3s all;
         border-radius: 4px;
-        &:hover {
+        background: #004e99;
-            background: #81b5e4;
+        margin-bottom: 4px;
+        &:hover,
+        &.active {
+            background: #22a2ff;
             .icons {
                 filter: brightness(100);
             }
@@ -217,15 +220,6 @@ a {
     .sub-menu {
         padding: 13px 13px 13px 45px;
         position: relative;
-        &::before {
-            content: "";
-            width: 1px;
-            height: calc(100% - 39px);
-            background: #79b0e2;
-            position: absolute;
-            left: 20px;
-            top: 20px;
-        }
         a {
             display: block;
             margin-bottom: 15px;
@@ -237,16 +231,6 @@ a {
                 font-weight: 700;
                 text-decoration: none;
             }
-            &::before {
-                content: "";
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-                background: #79b0e2;
-                position: absolute;
-                top: 6px;
-                left: -28px;
-            }
             &:last-child {
                 margin: 0;
             }

template/theme.html

@@ -29,10 +29,11 @@
 
 
 
+
     <div class="admin-global-container">
 
         <!-- Menu full  -->
-        <div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="js-menu-big">
+        <div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh]" id="js-menu-big">
             <a href="javascript:void(0)" class="icon-close" title="Thu gọn menu" id="js-hide-menu">
                 <i class="fa-solid fa-outdent"></i>
             </a>
@@ -42,9 +43,9 @@
             </a>
 
             <div class="menu-list">
-                <a href="/" class="item">
+                <a href="/" class="item {% if global.module == 'home' %} active {% endif %}">
                     <i class="icons icon-home"></i>
-                    <span class="title"> Dashboard </span>
+                    <span class="title"> Home </span>
                 </a>
 
                 {% for _category in global.main_menu %}
@@ -52,7 +53,7 @@
                 {% assign _menuArray = _category[1].menu %}
                 {% if _category[1].enable == 1 %}
                 <details {% if _type==global.module %} open {% endif %}>
-                    <summary class="item">
+                    <summary class="item {% if _type == global.module %} active {% endif %}">
                         <div class="flex items-center">
 
                             {% if _type == 'order' %} <i class="icons icon-order"></i>
@@ -72,7 +73,7 @@
                             <span class="title"> {{ _category[1].name }} </span>
                         </div>
 
-                        <i class="fa-solid fa-angle-right"></i>
+                        <i class="fa-solid fa-chevron-right"></i>
                     </summary>
 
                     <div class="sub-menu">
@@ -112,7 +113,7 @@
         </div>
 
         <!-- Menu collapse -->
-        <div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]"
+        <div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh] hidden"
             id="js-menu-small">
             <div>
                 <div