feat(ui): menu bar verplaatst naar linkerzijkant van gui

webui/html/index.html

@@ -285,6 +285,102 @@
     .menuItem.ok{ border-color: rgba(45,212,191,.35); }
     .menuItem.warn{ border-color: rgba(251,191,36,.35); }
     .menuItem.bad{ border-color: rgba(251,113,133,.35); }
+
+    /* =========================
+      Layout: Sidebar + Main
+      ========================= */
+    .layout {
+      display: flex;
+      gap: 0;
+      align-items: stretch;
+    }
+
+    /* Sidebar links (onder header) */
+    .sidebar {
+      width: 220px;
+      flex: 0 0 220px;
+      border-right: 1px solid rgba(36,52,95,.7);
+      background: rgba(11,18,32,.55);
+      backdrop-filter: blur(10px);
+      min-height: calc(100vh - 72px); /* header hoogte approx; mag iets afwijken */
+      position: sticky;
+      top: 72px;  /* start direct onder header */
+      align-self: flex-start;
+      padding: 12px;
+    }
+
+    .sidebar.collapsed {
+      width: 64px;
+      flex-basis: 64px;
+    }
+
+    /* Toggle button bovenaan in sidebar */
+    .sidebarTop {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+
+    .sidebarToggle {
+      width: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    /* Verticale tabs */
+    .sidebar .tabs {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 0; /* override jouw header margin-top */
+    }
+
+    /* Tab als menu item (zelfde element, andere layout) */
+    .sidebar .tab {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      border-radius: 12px;
+      padding: 10px 12px;
+    }
+
+    /* Icon + label */
+    .navIcon {
+      width: 22px;
+      text-align: center;
+      font-size: 16px;
+      line-height: 1;
+    }
+
+    .navLabel {
+      white-space: nowrap;
+    }
+
+    /* Collapsed: alleen icon zichtbaar */
+    .sidebar.collapsed .navLabel {
+      display: none;
+    }
+    .sidebar.collapsed .tab {
+      justify-content: center;
+      padding: 10px 10px;
+    }
+
+    /* Main content: behoud jouw wrap look, maar laat het rechts groeien */
+    .main {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    /* Op small screens: standaard collapsed (optioneel maar praktisch) */
+    @media (max-width: 980px){
+      .sidebar { width: 64px; flex-basis: 64px; }
+      .sidebar .navLabel { display: none; }
+      .sidebar .tab { justify-content: center; }
+    }
   </style>
 </head>
 
@@ -305,18 +401,38 @@
         <button class="btn" onclick="refreshActive()">Ververs</button>
       </div>
     </div>
-
-    <div class="tabs">
-      <div class="tab active" id="tab-dashboard" onclick="setTab('dashboard')">Dashboard</div>
-      <div class="tab" id="tab-containers" onclick="setTab('containers')">Containers</div>
-      <div class="tab" id="tab-pods" onclick="setTab('pods')">Pods</div>
-      <div class="tab" id="tab-systemd" onclick="setTab('systemd')">Systemd</div>
-      <div class="tab" id="tab-files" onclick="setTab('files')">Files</div>
-    </div>
   </div>
 </header>
 
-<div class="wrap">
+<div class="layout">
+  <!-- Sidebar -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebarTop">
+      <button class="btn small ghost sidebarToggle" id="sidebarToggle" title="Sidebar in/uitklappen">☰</button>
+    </div>
+
+    <div class="tabs">
+      <div class="tab active" id="tab-dashboard" onclick="setTab('dashboard')" title="Dashboard">
+        <span class="navIcon">🏠</span><span class="navLabel">Dashboard</span>
+      </div>
+      <div class="tab" id="tab-containers" onclick="setTab('containers')" title="Containers">
+        <span class="navIcon">📦</span><span class="navLabel">Containers</span>
+      </div>
+      <div class="tab" id="tab-pods" onclick="setTab('pods')" title="Pods">
+        <span class="navIcon">🧩</span><span class="navLabel">Pods</span>
+      </div>
+      <div class="tab" id="tab-systemd" onclick="setTab('systemd')" title="Systemd">
+        <span class="navIcon">⚙️</span><span class="navLabel">Systemd</span>
+      </div>
+      <div class="tab" id="tab-files" onclick="setTab('files')" title="Files">
+        <span class="navIcon">📁</span><span class="navLabel">Files</span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main -->
+<main class="main">
+  <div class="wrap">
     <div id="view-dashboard" class="grid">
     <div class="card half">
       <div class="cardHeader">
@@ -501,7 +617,9 @@
       </div>
     </div>
   </div>
-</div>
+    </div> <!-- einde main wrap -->
+  </main>
+</div> <!-- einde layout -->
 
 <!-- Modal -->
 <div class="modalBack" id="modalBack" onclick="closeModal(event)">
@@ -607,6 +725,22 @@
     refreshActive();
   }
   
+  // ---- Sidebar collapse ----
+  const SIDEBAR_KEY = 'mvp_sidebar_collapsed_v1';
+
+  function applySidebarState() {
+    const sb = document.getElementById('sidebar');
+    if (!sb) return;
+    const collapsed = localStorage.getItem(SIDEBAR_KEY) === '1';
+    sb.classList.toggle('collapsed', collapsed);
+  }
+
+  function toggleSidebar() {
+    const collapsed = localStorage.getItem(SIDEBAR_KEY) === '1';
+    localStorage.setItem(SIDEBAR_KEY, collapsed ? '0' : '1');
+    applySidebarState();
+  }
+
   document.addEventListener("visibilitychange", () => {
     if (document.visibilityState !== "visible") {
       stopContainersStatsStream();
@@ -1392,6 +1526,9 @@
 
 // ---- Init ----
   (async function init(){
+    applySidebarState();
+    const t = document.getElementById('sidebarToggle');
+    if (t) t.onclick = toggleSidebar;
     // preload systemd units UI
     const units = await getSystemdUnitsFromServer();
     systemdRenderRows(units);