update admin dashboard side nav

core/admin-dashboard/components/SideNavListItems.vue

@@ -9,13 +9,13 @@
     :profileImg="admin_avatar"
     :profileName="admin_name"
     :profileRole="admin_type"
-    @button-exit-clicked="signOut"
     bgColor="#ffffff"
     menuItemsTextColor="#000000"
-    menuItemsHoverColor="#e7e7ff"
+    menuItemsHoverColor="#ff2e55"
     logoTitleColor="#000000"
     iconsColor="#000000"
     menuFooterTextColor="#ffffff"
+    @button-exit-clicked="signOut"
   />
 </template>
 

core/admin-dashboard/layouts/default.vue

@@ -35,14 +35,33 @@ export default {
       app_loading: "app_loading",
     }),
   },
+
+  mounted() {
+    const nav_items = document.querySelectorAll("ul.nav-list li a");
+    const locale = this.$i18n.getLocaleCookie();
+    const route_path = this.$route.fullPath.replace(`/${locale}`, "") || "/";
+    for (const item of nav_items) {
+      const href = item.getAttribute("href");
+
+      const can_active =
+        (href === "/" && route_path === "/") ||
+        (href !== "/" && route_path.includes(href));
+
+      if (can_active) {
+        item.classList.add("active");
+        continue;
+      }
+
+      item.classList.remove("active");
+    }
+  },
 };
 </script>
 <style scoped>
-.nav-wrapper {
-  min-width: 270px;
-  max-width: 270px;
+:deep(ul.nav-list li a.active) {
+  background-color: var(--color-brick);
 }
-.nav-wrapper {
-  min-width: 78px;
+:deep(ul.nav-list li a.active) * {
+  color: var(--color-white);
 }
 </style>

core/admin-dashboard/package.json

@@ -48,4 +48,4 @@
     "nuxt-purgecss": "1.0.0",
     "sass": "^1.70.0"
   }
-}
+}