fix: ProxmoxPanel Sub-Navigation als linkes Sidebar-Menü wie AgentPanel

frontend/src/components/ProxmoxPanel.jsx

@@ -9,6 +9,7 @@ import {
   X, Cpu, MemoryStick, HardDrive, Clock, Network, Server, Monitor,
   Container, Database, FolderTree, Settings, Download, Trash2, Copy, Check,
   MonitorSmartphone, Terminal, Cable, ExternalLink, Plus, Unplug, Search, Shield, Play, FileCode,
+  LayoutGrid, Archive, GitBranch, Wrench, RefreshCw, CalendarClock, Bot,
 } from 'lucide-react'
 
 const mainCategories = [
@@ -20,21 +21,21 @@ const mainCategories = [
 
 const buildSubTabs = (hasPBS) => ({
   virtualisierung: [
-    { id: 'vms',        label: 'VMs' },
+    { id: 'vms',        label: 'VMs',       icon: Monitor },
-    { id: 'containers', label: 'Container' },
+    { id: 'containers', label: 'Container', icon: Container },
   ],
   speicher: [
-    { id: 'storage',  label: 'Storage' },
+    { id: 'storage',  label: 'Storage',        icon: HardDrive },
-    { id: 'zfs',      label: 'ZFS' },
+    { id: 'zfs',      label: 'ZFS',            icon: Database },
-    { id: 'backups',  label: 'Backups' },
+    { id: 'backups',  label: 'Backups',        icon: Archive },
-    ...(hasPBS ? [{ id: 'pbs', label: 'Backup Server' }] : []),
+    ...(hasPBS ? [{ id: 'pbs', label: 'Backup Server', icon: Server }] : []),
   ],
   system: [
-    { id: 'services', label: 'Dienste' },
+    { id: 'services', label: 'Dienste',   icon: Settings },
-    { id: 'updates',  label: 'Updates' },
+    { id: 'updates',  label: 'Updates',   icon: RefreshCw },
-    { id: 'tasks',    label: 'Aufgaben' },
+    { id: 'tasks',    label: 'Aufgaben',  icon: CalendarClock },
-    { id: 'tunnel',   label: 'Tunnel' },
+    { id: 'tunnel',   label: 'Tunnel',    icon: Cable },
-    { id: 'agent',    label: 'Agent' },
+    { id: 'agent',    label: 'Agent',     icon: Bot },
   ],
 })
 
@@ -132,15 +133,15 @@ export default function ProxmoxPanel({ agentId, customers, onClose, onReload })
         </div>
 
         {/* Haupt-Tabs */}
-        <div className="flex gap-1 mt-4 text-xs">
+        <div className="flex gap-1 mt-4 overflow-x-auto text-xs">
           {mainCategories.map((cat) => (
             <button
               key={cat.id}
               onClick={() => handleMainTab(cat.id, subs)}
-              className={`px-3 py-1.5 rounded-t whitespace-nowrap transition-colors ${
+              className={`px-4 py-1.5 whitespace-nowrap transition-colors border-b-2 ${
                 mainTab === cat.id
-                  ? 'bg-gray-900 text-orange-400 border-t border-x border-gray-700'
+                  ? 'text-orange-400 border-orange-400'
-                  : 'text-gray-400 hover:text-gray-200'
+                  : 'text-gray-400 hover:text-gray-200 border-transparent'
               }`}
             >
               {cat.label}
@@ -149,31 +150,42 @@ export default function ProxmoxPanel({ agentId, customers, onClose, onReload })
         </div>
       </div>
 
-      {/* Sub-Tabs */}
+      {/* Content + optionale Sidebar */}
-      {currentSubs.length > 0 && (
+      <div className="flex-1 flex overflow-hidden">
-        <div className="px-6 py-2 bg-gray-900/60 border-b border-gray-800 flex items-center gap-1 text-xs">
-          <span className="text-gray-600 mr-2">
-            {mainCategories.find(c => c.id === mainTab)?.label}
-          </span>
-          {currentSubs.map((s) => (
-            <button
-              key={s.id}
-              onClick={() => setSubTab(s.id)}
-              className={`px-2.5 py-1 rounded whitespace-nowrap transition-colors ${
-                activeSubTab === s.id
-                  ? 'bg-gray-700 text-white'
-                  : 'text-gray-500 hover:text-gray-300'
-              }`}
-            >
-              {s.label}
-            </button>
-          ))}
-        </div>
-      )}
 
-      {/* Content */}
+        {/* Sub-Navigation links — nur wenn nicht Uebersicht */}
-      <div className="flex-1 overflow-y-auto p-6 space-y-4">
+        {mainTab !== 'uebersicht' && currentSubs.length > 0 && (
-        {renderContent()}
+          <div className="w-44 shrink-0 bg-gray-900/50 border-r border-gray-800 overflow-y-auto py-3">
+            <div className="px-4 mb-2">
+              <span className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
+                {mainCategories.find(c => c.id === mainTab)?.label}
+              </span>
+            </div>
+            {currentSubs.map((item) => {
+              const Icon = item.icon
+              const isActive = activeSubTab === item.id
+              return (
+                <button
+                  key={item.id}
+                  onClick={() => setSubTab(item.id)}
+                  className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors ${
+                    isActive
+                      ? 'text-orange-400 bg-orange-400/5 border-l-2 border-orange-400'
+                      : 'text-gray-400 hover:text-white border-l-2 border-transparent'
+                  }`}
+                >
+                  {Icon && <Icon className="w-4 h-4 shrink-0" />}
+                  <span>{item.label}</span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Hauptinhalt */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          {renderContent()}
+        </div>
       </div>
     </Panel>
   )