From 385d10d2cb098b49cbe5de66f227de01bc950776 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 20:42:19 +0900
Subject: [PATCH] fix(fe): fix missing Vue hook imports in KsSidebar for
 TypeScript build verification

---
 frontend/src/shared/shell/KsSidebar.vue | 26 ++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/shared/shell/KsSidebar.vue b/frontend/src/shared/shell/KsSidebar.vue
index 32b46d82..b12cf9d0 100644
--- a/frontend/src/shared/shell/KsSidebar.vue
+++ b/frontend/src/shared/shell/KsSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAnimatedCollapse } from '../composables/useAnimatedCollapse'
 
@@ -83,14 +83,34 @@ const menuItems: MenuItem[] = [
   },
 ]
 
+// Auto-expand sections based on current active route
+onMounted(() => {
+  menuItems.forEach(item => {
+    if (item.children?.some(c => c.path === route.path)) {
+      expandedSections.value.add(item.id)
+    }
+  })
+})
+
+watch(() => route.path, (newPath) => {
+  menuItems.forEach(item => {
+    if (item.children?.some(c => c.path === newPath)) {
+      expandedSections.value.add(item.id)
+    }
+  })
+}, { immediate: true })
+
 const isActive = (path: string) => route.path === path
 
-const toggleSection = (itemId: string) => {
+const toggleSection = (itemId: string, defaultPath?: string) => {
   if (expandedSections.value.has(itemId)) {
     expandedSections.value.delete(itemId)
   } else {
     expandedSections.value.add(itemId)
   }
+  if (defaultPath) {
+    router.push(defaultPath)
+  }
 }
 
 const isSectionExpanded = (itemId: string) => expandedSections.value.has(itemId)
@@ -140,7 +160,7 @@ const sidebarClass = computed(() => ({
             },
           ]"
           :title="item.label"
-          @click="item.children ? toggleSection(item.id) : handleMenuClick(item.path)"
+          @click="item.children ? toggleSection(item.id, item.path) : handleMenuClick(item.path)"
         >
           <span class="ks-sidebar__icon">{{ item.icon }}</span>
           <span class="ks-sidebar__label">{{ item.label }}</span>