update akbar tampilan login dashboard dan verifikasi

components/SideBar.vue

@@ -23,7 +23,8 @@
     </v-list-item>
     <v-divider></v-divider>
 
-    <v-list density="compact" nav class="mt-2" v-model:opened="openedGroups"> <template v-for="item in items" :key="item.name">
+    <v-list density="compact" nav class="mt-2" v-model:opened="openedGroups">
+      <template v-for="item in items" :key="item.name">
         
         <v-list-group 
           v-if="item.children"
@@ -99,12 +100,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineEmits, onMounted, ref, watch } from 'vue'; // IMPORT WATCH
-import { navigateTo } from '#app';
+import { defineProps, defineEmits, onMounted, ref, watch } from 'vue';
+import { navigateTo, useRoute } from '#app';
 import ProfilePopup from './ProfilePopup.vue';
-import { useAuth } from '~/composables/useAuth';
+import { useAuth } from '~/composables/useAuth'; // Ensure this path is correct
 
 const { user, logout, checkAuth } = useAuth();
+const route = useRoute(); // Access the current route
 
 interface NavItem {
   id: number;
@@ -131,22 +133,38 @@ const props = defineProps({
 
 const emit = defineEmits(['update:drawer', 'toggle-rail']);
 
-// --- NEW STATE FOR DROPDOWN GROUPS ---
-// This holds the names of the currently open list groups.
 const openedGroups = ref<string[]>([]);
+const isHovering = ref(false);
 
-// --- NEW WATCHER TO CLOSE DROPDOWNS ---
+// --- WATCHERS FOR DROPDOWN AND HIGHLIGHTING ---
+
+// 1. WATCHER: Close dropdowns when sidebar collapses (rail = true)
 watch(() => props.rail, (newRailState) => {
   if (newRailState === true) {
-    // If the sidebar is collapsing (rail is true), close all groups
     openedGroups.value = [];
   }
 });
-// ------------------------------------
 
+// 2. WATCHER: Open the parent group when a child route is active
+watch(() => route.path, (newPath) => {
+  // Find the parent item whose children contain the current path
+  const activeParent = props.items.find(item => 
+    item.children && item.children.some(child => 
+      child.path === newPath
+    )
+  );
+
+  if (activeParent) {
+    // If a parent is active, ensure it's in the openedGroups array
+    if (!openedGroups.value.includes(activeParent.name)) {
+      openedGroups.value.push(activeParent.name);
+    }
+    
+    // Optional: Keep only the active parent open, closing others
+    // openedGroups.value = [activeParent.name];
+  }
+}, { immediate: true }); 
 
-// Local state for hover-to-expand rail feature
-const isHovering = ref(false);
 
 // --- HOVER LOGIC for Rail Expansion ---
 
@@ -164,11 +182,12 @@ const handleMouseLeave = () => {
   }
 };
 
-// --- AUTH LOGIC (Kept the same) ---
+// --- AUTH LOGIC ---
 
 const handleLogout = async () => {
   console.log('🚪 SideBar logout initiated...');
   try {
+    // Calls the external logout function (from useAuth.ts)
     await logout(); 
   } catch (error) {
     console.error('❌ SideBar logout error:', error);
@@ -180,6 +199,7 @@ const redirectToLogin = () => {
 };
 
 onMounted(async () => {
+    // Fetches real user data on mount
     await checkAuth(); 
 });
 </script>