From 9c00f3db7d92d1a2732b4c914b9950ccb1285487 Mon Sep 17 00:00:00 2001
From: Baghaztra <baghaztra21@gmail.com>
Date: Mon, 29 Sep 2025 10:01:21 +0700
Subject: [PATCH] [Update] Navigation menu active

---
 resources/js/components/NavDesktop.vue | 40 ++++++++++++++++++----
 resources/js/components/NavMobile.vue  | 47 +++++++++++++++++++-------
 2 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/NavDesktop.vue b/resources/js/components/NavDesktop.vue
index 04303ac..dd515c9 100644
--- a/resources/js/components/NavDesktop.vue
+++ b/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)"
-                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">
+              <button 
+                @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"
-              class="flex-1 text-center text-lg text-D hover:underline cursor-pointer transition-colors duration-200 py-2">
+            <router-link 
+              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>
diff --git a/resources/js/components/NavMobile.vue b/resources/js/components/NavMobile.vue
index e2eccc5..49b93ad 100644
--- a/resources/js/components/NavMobile.vue
+++ b/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,21 +12,33 @@ 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>
   <div class="md:hidden">
     <div class="bg-D h-5 shadow-lg"></div>
     
-      <button @click="toggleMobileMenu"
+    <button @click="toggleMobileMenu"
       :class="{ 'hidden': isMobileMenuOpen, 'block': !isMobileMenuOpen }"
-        class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
-        <svg class="w-7 h-7" fill="none"
-          stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
-      </button>
-    
+      class="fixed top-4 left-4 text-D bg-C hover:bg-B transition-colors duration-200 p-0.5 rounded-sm z-[9999]">
+      <svg class="w-7 h-7" fill="none"
+        stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </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">
@@ -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,16 +77,22 @@ 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>
             </transition>
-            </div>
+          </div>
 
           <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>