x

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

@@ -5,34 +5,88 @@ const { state, menuGroups, openGroups, toggleGroup, handleMenuClick } = useInven
 </script>
 
 <template>
-  <t-menu
-    :default-expanded="Object.keys(openGroups)"
-    model-value=""
-    class="inventory-sidebar"
-  >
+  <nav class="sidebar-nav">
     <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>
         <span class="group-arrow">{{ openGroups[group.key] ? '▾' : '▸' }}</span>
       </div>
       <template v-if="openGroups[group.key]">
-        <t-menu-item
+        <div
           v-for="item in group.items"
           :key="item.key"
-          :value="item.key"
+          :class="['sidebar-item', { active: state.activeTab === item.key }]"
           @click="handleMenuClick(item.key)"
         >
           {{ item.label }}
-        </t-menu-item>
+        </div>
       </template>
     </div>
-  </t-menu>
+  </nav>
 </template>
 
 <style scoped>
+.sidebar-nav {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2);
+}
+
+.sidebar-group {
+  margin-bottom: var(--space-2);
+}
+
+.sidebar-group:last-child {
+  margin-bottom: 0;
+}
+
+.sidebar-group-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s;
+}
+
+.sidebar-group-title:hover {
+  background: var(--bg-tertiary);
+}
+
 .group-arrow {
   font-size: 10px;
-  color: var(--text-tertiary);
   transition: transform 0.2s;
 }
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 var(--space-3) 0 var(--space-6);
+  margin: 1px var(--space-1);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s;
+}
+
+.sidebar-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.sidebar-item.active {
+  background: var(--primary-50);
+  color: var(--primary-600);
+  font-weight: var(--font-medium);
+}
 </style>