[Update] Navigation menu active

resources/js/components/NavDesktop.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { inject } from "vue";
+import { useRoute } from "vue-router";
 
 const {
   logo,
@@ -8,6 +9,19 @@ const {
   toggleDropdown,
   logout
 } = inject('navigationData');
+
+const route = useRoute();
+
+// Function to check if a menu item or its subItems are active
+const isMenuActive = (item) => {
+  if (item.route) {
+    return route.path === item.route;
+  }
+  if (item.subItems) {
+    return item.subItems.some(sub => route.path === sub.route);
+  }
+  return false;
+};
 </script>
 
 <template>
@@ -24,10 +38,13 @@ const {
       <div class="px-8 pb-4">
         <div class="flex justify-around items-center gap-4">
           <template v-for="(item, index) in items" :key="index">
-
             <div v-if="item.subItems" class="relative flex-1">
-              <button @click="toggleDropdown(index)"
+              <button 
-                class="w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2">
+                @click="toggleDropdown(index)"
+                :class="[
+                  'w-full text-center text-lg text-D hover:underline cursor-pointer flex items-center justify-center gap-2 transition-colors duration-200 py-2',
+                  { 'underline underline-offset-4': isMenuActive(item) }
+                ]">
                 {{ item.label }}
                 <svg :class="{ 'rotate-180': openDropdownIndex === index }"
                   class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor"
@@ -41,9 +58,13 @@ const {
                 <ul>
                   <li v-for="(sub, subIndex) in item.subItems" :key="subIndex"
                     class="hover:bg-A transition-colors duration-200">
-                    <router-link :to="sub.route" 
+                    <router-link 
+                      :to="sub.route"
                       @click="openDropdownIndex = null"
-                      class="block w-full h-full px-4 py-2 text-D">
+                      :class="[
+                        'block w-full h-full px-4 py-2 text-D',
+                        { 'underline underline-offset-4': route.path === sub.route }
+                      ]">
                       {{ sub.label }}
                     </router-link>
                   </li>
@@ -51,8 +72,13 @@ const {
               </div>
             </div>
 
-            <router-link v-else :to="item.route"
+            <router-link 
-              class="flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2">
+              v-else 
+              :to="item.route"
+              :class="[
+                'flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2',
+                { 'underline underline-offset-4': isMenuActive(item) }
+              ]">
               {{ item.label }}
             </router-link>
           </template>

resources/js/components/NavMobile.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { inject } from "vue";
+import { useRoute } from "vue-router";
 
-// Mengambil data dan fungsi yang disediakan dari komponen induk
 const {
   logo,
   items,
@@ -12,6 +12,19 @@ const {
   closeMobileMenu,
   logout
 } = inject('navigationData');
+
+const route = useRoute();
+
+// Function to check if a menu item or its subItems are active
+const isMenuActive = (item) => {
+  if (item.route) {
+    return route.path === item.route;
+  }
+  if (item.subItems) {
+    return item.subItems.some(sub => route.path === sub.route);
+  }
+  return false;
+};
 </script>
 
 <template>
@@ -27,7 +40,6 @@ const {
       </svg>
     </button>
 
-
     <div :class="{ 'translate-x-0': isMobileMenuOpen, '-translate-x-full': !isMobileMenuOpen }"
       class="fixed inset-y-0 left-0 w-64 bg-A transform transition-transform duration-300 ease-in-out z-50 shadow-xl">
       <div class="px-4 py-3 flex justify-between items-center border-b border-B">
@@ -43,7 +55,10 @@ const {
         <template v-for="(item, index) in items" :key="index">
           <div v-if="item.subItems" class="px-4 py-2">
             <button @click="toggleDropdown(index)"
-              class="w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200">
+              :class="[
+                'w-full flex justify-between items-center text-left text-lg text-D hover:bg-B rounded-md px-3 py-2 transition-colors duration-200',
+                { 'bg-C': isMenuActive(item) }
+              ]">
               <span>{{ item.label }}</span>
               <svg :class="{ 'rotate-180': openDropdownIndex === index }" class="w-4 h-4 transition-transform duration-200"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -62,7 +77,10 @@ const {
               <div v-if="openDropdownIndex === index" class="mt-2 ml-4 space-y-1 overflow-hidden">
                 <router-link v-for="(sub, subIndex) in item.subItems" :key="subIndex" :to="sub.route"
                   @click="closeMobileMenu"
-                  class="block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200">
+                  :class="[
+                    'block px-3 py-2 text-D hover:bg-B rounded-md transition-colors duration-200',
+                    { 'bg-C': route.path === sub.route }
+                  ]">
                   {{ sub.label }}
                 </router-link>
               </div>
@@ -71,7 +89,10 @@ const {
 
           <div v-else class="px-4">
             <router-link :to="item.route" @click="closeMobileMenu"
-              class="block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200">
+              :class="[
+                'block px-3 py-2 text-lg text-D hover:bg-B rounded-md transition-colors duration-200',
+                { 'bg-C': isMenuActive(item) }
+              ]">
               {{ item.label }}
             </router-link>
           </div>