x

frontend/src/modules/inventory/components/InventorySidebar.vue

@@ -6,20 +6,21 @@ const { state, menuGroups, openGroups, toggleGroup, handleMenuClick } = useInven
 
 <template>
   <t-menu
-    :default-active="state.activeTab"
+    :default-expanded="Object.keys(openGroups)"
+    model-value=""
     class="inventory-sidebar"
-    @select="(key: string) => handleMenuClick(key)"
   >
     <div v-for="group in menuGroups" :key="group.key" class="sidebar-group">
       <div class="sidebar-group-title" @click="toggleGroup(group.key)">
         <span>{{ group.title }}</span>
-        <t-icon><component :is="openGroups[group.key] ? 'ArrowDown' : 'ArrowRight'" /></t-icon>
+        <span class="group-arrow">{{ openGroups[group.key] ? '▾' : '▸' }}</span>
       </div>
       <template v-if="openGroups[group.key]">
         <t-menu-item
           v-for="item in group.items"
-          :key="group.key + '-' + item.key"
-          :index="item.key"
+          :key="item.key"
+          :value="item.key"
+          @click="handleMenuClick(item.key)"
         >
           {{ item.label }}
         </t-menu-item>
@@ -27,3 +28,11 @@ const { state, menuGroups, openGroups, toggleGroup, handleMenuClick } = useInven
     </div>
   </t-menu>
 </template>
+
+<style scoped>
+.group-arrow {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  transition: transform 0.2s;
+}
+</style>