From 301063533a7960ae2685473786e1ab37a97a9205 Mon Sep 17 00:00:00 2001
From: namdh861 <namdh861@gmail.com>
Date: Wed, 9 Sep 2026 19:32:58 +0700
Subject: [PATCH] feat: add submenu style

---
 src/layouts/MainLayout.vue | 35 +++++++++++++++++++++++++++--------
 src/services/api.ts        |  2 +-
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index afda3f0..309acbe 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -43,15 +43,16 @@
         <div v-if="currentProject">
           <button
             class="nav-link w-full"
+            :class="{ 'router-link-active': isProjectsActive }"
             @click="projectsExpanded = !projectsExpanded"
           >
             <i class="pi pi-folder-open"></i> Projects
             <i class="pi ml-auto text-xs" :class="projectsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
           </button>
-          <div v-show="projectsExpanded" class="ml-3 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
+          <div v-show="projectsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
             <router-link
               v-if="auth.canView('tasks')"
-              class="nav-link nav-link-sub"
+              class="nav-link nav-link-sub submenu-link"
               :to="{ name: 'tasks-board', params: { id: currentProject.id } }"
               @click="handleNavClick"
             >
@@ -59,14 +60,14 @@
             </router-link>
             <router-link
               v-if="auth.canView('documents')"
-              class="nav-link nav-link-sub"
+              class="nav-link nav-link-sub submenu-link"
               :to="{ name: 'documents', params: { id: currentProject.id } }"
               @click="handleNavClick"
             >
               <i class="pi pi-file"></i> Documents
             </router-link>
             <router-link
-              class="nav-link nav-link-sub"
+              class="nav-link nav-link-sub submenu-link"
               :to="{ name: 'members', params: { id: currentProject.id } }"
               @click="handleNavClick"
             >
@@ -88,19 +89,20 @@
         <div v-if="auth.canView('masterdata') || auth.canView('permissions')">
           <button
             class="nav-link w-full"
+            :class="{ 'router-link-active': isSettingsActive }"
             @click="settingsExpanded = !settingsExpanded"
           >
             <i class="pi pi-cog"></i> Settings
             <i class="pi ml-auto text-xs" :class="settingsExpanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
           </button>
-          <div v-show="settingsExpanded" class="ml-3 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
-            <router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub" to="/settings/masterdata" @click="handleNavClick">
+          <div v-show="settingsExpanded" class="ml-3 mt-2 flex flex-col gap-0.5 border-l pl-2" style="border-color: var(--hairline)">
+            <router-link v-if="auth.canView('masterdata')" class="nav-link nav-link-sub submenu-link" to="/settings/masterdata" @click="handleNavClick">
               Master Data
             </router-link>
-            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub" to="/settings/roles" @click="handleNavClick">
+            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/roles" @click="handleNavClick">
               Roles
             </router-link>
-            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub" to="/settings/permissions" @click="handleNavClick">
+            <router-link v-if="auth.canView('permissions')" class="nav-link nav-link-sub submenu-link" to="/settings/permissions" @click="handleNavClick">
               Permissions
             </router-link>
           </div>
@@ -204,6 +206,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useTheme } from '../composables/useTheme'
 import { getProject, getProjects, updateUser } from '../services/backend'
@@ -221,6 +224,8 @@ const desktopMq = window.matchMedia('(min-width: 1024px)')
 const isDesktop = ref(desktopMq.matches)
 const sidebarOpen = ref(isDesktop.value)
 const settingsExpanded = ref(false)
+const isProjectsActive = computed(() => route.path.startsWith('/projects/'))
+const isSettingsActive = computed(() => route.path.startsWith('/settings/'))
 desktopMq.addEventListener('change', (e) => (isDesktop.value = e.matches))
 
 function handleNavClick() {
@@ -412,4 +417,18 @@ onMounted(() => {
   border-radius: 999px;
   background: var(--magenta);
 }
+.submenu-link.router-link-active {
+  background: transparent !important;
+  color: #6a7cd0 !important;
+}
+.submenu-link.router-link-active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 20%;
+  height: 60%;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--magenta);
+}
 </style>
diff --git a/src/services/api.ts b/src/services/api.ts
index e692913..80a1755 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -4,7 +4,7 @@ import { useLoading } from '../composables/useLoading'
 const { start: loadingStart, stop: loadingStop } = useLoading()
 
 export const api: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:2000',
+  baseURL: import.meta.env.VITE_API_BASE_URL ?? 'https://mws-api.koda.id.vn',
   headers: {
     'Content-Type': 'application/json',
   },