x

frontend/src/modules/inventory/InventoryView.vue

@@ -70,7 +70,7 @@ onUnmounted(() => {
         <t-alert
           v-if="!state.backendDbReady"
           :title="state.backendDbMessage"
-          type="warning"
+          theme="warning"
           show-icon
           :closable="false"
           style="margin-bottom: 16px;"
@@ -99,45 +99,12 @@ onUnmounted(() => {
 .page-header h1 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--text-primary); margin: 0; }
 .page-header p { color: var(--text-tertiary); margin: var(--space-1) 0 0; font-size: var(--text-sm); }
 
-.inventory-layout { display: flex; gap: var(--space-6); min-height: calc(100vh - 200px); }
-.inventory-sidebar-wrapper { width: 200px; flex-shrink: 0; }
+.inventory-layout { display: flex; gap: var(--space-6); align-items: flex-start; }
+.inventory-sidebar-wrapper { width: 200px; flex-shrink: 0; position: sticky; top: 80px; }
 .inventory-content { flex: 1; min-width: 0; }
 
 .inventory-content-header { margin-bottom: var(--space-4); }
 .inventory-breadcrumb { font-size: var(--text-sm); color: var(--text-tertiary); }
 .inventory-breadcrumb .sep { margin: 0 var(--space-2); }
 .inventory-breadcrumb .current { color: var(--text-primary); font-weight: var(--font-medium); }
-
-.inventory-sidebar-wrapper :deep(.t-menu) {
-  border-right: none;
-  background: transparent;
-}
-.inventory-sidebar-wrapper :deep(.sidebar-group-title) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-3) var(--space-4);
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  cursor: pointer;
-  user-select: none;
-}
-.inventory-sidebar-wrapper :deep(.t-menu__item) {
-  height: 36px;
-  line-height: 36px;
-  font-size: var(--text-sm);
-  margin: 2px var(--space-2);
-  border-radius: var(--radius-md);
-  padding: 0 var(--space-4);
-}
-.inventory-sidebar-wrapper :deep(.t-is-active) {
-  background: var(--primary-50);
-  color: var(--primary-600);
-  font-weight: var(--font-medium);
-}
-.inventory-sidebar-wrapper :deep(.t-menu__item:hover) {
-  background: var(--bg-tertiary);
-}
 </style>

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>