From 223f5abf78e4b81f83cd56d5eb5eda2e173890cd Mon Sep 17 00:00:00 2001
From: Kroonk <Tom.misch2@gmail.com>
Date: Thu, 21 May 2026 18:32:30 +0200
Subject: [PATCH] feat: add hamburger menu navigation drawer and tabbed views
 for admin sections

---
 admin.html |  61 +++++++++++++--
 admin.js   |  96 +++++++++++++++++++++++-
 style.css  | 217 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 364 insertions(+), 10 deletions(-)

diff --git a/admin.html b/admin.html
index 2a061e8..d3845c8 100644
--- a/admin.html
+++ b/admin.html
@@ -20,9 +20,14 @@
         </div>
 
         <div class="admin-actions">
-            <a class="ghost-button" href="/">Dashboard</a>
+            <a class="ghost-button" id="headerDashboardBtn" href="/">Dashboard</a>
             <button class="ghost-button" id="loginButton" type="button">Mit Keycloak anmelden</button>
             <button class="ghost-button" id="logoutButton" type="button" hidden>Abmelden</button>
+            <button class="hamburger-menu-btn" id="hamburgerMenuBtn" aria-label="Menü öffnen" type="button" style="display: none;">
+                <span class="hamburger-bar"></span>
+                <span class="hamburger-bar"></span>
+                <span class="hamburger-bar"></span>
+            </button>
         </div>
     </header>
 
@@ -44,7 +49,7 @@
 
             <div id="adminUser" style="display: none;"></div>
             <div class="ops-grid" id="opsGrid">
-                <section class="ops-card ops-card-wide">
+                <section class="ops-card ops-card-wide admin-tab-content" id="card-services">
                     <div class="ops-card-head">
                         <div style="display: flex; align-items: center; gap: 8px;">
                             <span>Dienste-Status (Live-Proxy)</span>
@@ -55,7 +60,7 @@
                     <div id="servicesStatusBoard" class="services-status-board">Lade Status...</div>
                 </section>
 
-                <section class="ops-card">
+                <section class="ops-card admin-tab-content" id="card-disks">
                     <div class="ops-card-head">
                         <span>NAS Speicher</span>
                         <button class="ghost-button mini" id="refreshOpsButton" type="button">Aktualisieren</button>
@@ -63,7 +68,7 @@
                     <div id="diskStatus" class="ops-list">Noch nicht geladen.</div>
                 </section>
 
-                <section class="ops-card">
+                <section class="ops-card admin-tab-content" id="card-watchtower">
                     <div class="ops-card-head">
                         <span>Watchtower</span>
                         <button class="ghost-button mini" id="runWatchtowerButton" type="button">Jetzt pruefen</button>
@@ -71,7 +76,7 @@
                     <div id="watchtowerStatus" class="ops-list">Noch nicht geladen.</div>
                 </section>
 
-                <section class="ops-card ops-card-wide">
+                <section class="ops-card ops-card-wide admin-tab-content" id="card-containers">
                     <div class="ops-card-head">
                         <span>Container</span>
                         <button class="ghost-button mini danger-button" id="dangerModeButton" type="button">Danger entsperren</button>
@@ -81,7 +86,7 @@
                 </section>
             </div>
 
-            <section class="ops-card ops-card-wide is-collapsed" id="editorCard" style="margin-top: 14px;">
+            <section class="ops-card ops-card-wide admin-tab-content" id="editorCard" style="margin-top: 14px;">
                 <div class="ops-card-head">
                     <span>Dienste &amp; Kategorien (Konfiguration)</span>
                 </div>
@@ -96,6 +101,48 @@
         </section>
     </main>
 
-    <script src="/admin.js?v=17" defer></script>
+    <!-- Hamburger Navigation Drawer -->
+    <div class="admin-nav-backdrop" id="adminNavBackdrop"></div>
+    <aside class="admin-nav-drawer" id="adminNavDrawer">
+        <div class="drawer-header">
+            <h3>MischLabs Admin</h3>
+            <button class="drawer-close-btn" id="drawerCloseBtn" aria-label="Menü schließen" type="button">&times;</button>
+        </div>
+        <nav class="drawer-nav">
+            <button class="drawer-nav-item" data-tab="services" type="button">
+                <span class="drawer-nav-icon">🌐</span>
+                <span class="drawer-nav-text">Dienste-Status</span>
+            </button>
+            <button class="drawer-nav-item" data-tab="disks" type="button">
+                <span class="drawer-nav-icon">💾</span>
+                <span class="drawer-nav-text">NAS Speicher</span>
+            </button>
+            <button class="drawer-nav-item" data-tab="watchtower" type="button">
+                <span class="drawer-nav-icon">🐳</span>
+                <span class="drawer-nav-text">Watchtower</span>
+            </button>
+            <button class="drawer-nav-item" data-tab="containers" type="button">
+                <span class="drawer-nav-icon">📦</span>
+                <span class="drawer-nav-text">Container</span>
+            </button>
+            <button class="drawer-nav-item" data-tab="config" type="button">
+                <span class="drawer-nav-icon">⚙️</span>
+                <span class="drawer-nav-text">Dienste &amp; Kategorien</span>
+            </button>
+            
+            <div class="drawer-divider"></div>
+            
+            <a class="drawer-nav-item" href="/">
+                <span class="drawer-nav-icon">🏠</span>
+                <span class="drawer-nav-text">Dashboard</span>
+            </a>
+            <button class="drawer-nav-item drawer-logout-btn" id="drawerLogoutBtn" type="button">
+                <span class="drawer-nav-icon">🚪</span>
+                <span class="drawer-nav-text">Abmelden</span>
+            </button>
+        </nav>
+    </aside>
+
+    <script src="/admin.js?v=18" defer></script>
 </body>
 </html>
diff --git a/admin.js b/admin.js
index e5ab936..2bd20f2 100644
--- a/admin.js
+++ b/admin.js
@@ -746,6 +746,79 @@ function initCollapsibleCards() {
   });
 }
 
+let activeTab = localStorage.getItem('active_admin_tab') || 'services';
+
+function switchTab(tabId) {
+  activeTab = tabId;
+  localStorage.setItem('active_admin_tab', tabId);
+
+  const tabCards = {
+    services: document.getElementById('card-services'),
+    disks: document.getElementById('card-disks'),
+    watchtower: document.getElementById('card-watchtower'),
+    containers: document.getElementById('card-containers'),
+    config: document.getElementById('editorCard')
+  };
+
+  Object.entries(tabCards).forEach(([id, card]) => {
+    if (!card) return;
+    if (id === tabId) {
+      card.classList.add('is-active');
+      card.classList.remove('admin-tab-content');
+      card.classList.remove('is-collapsed');
+    } else {
+      card.classList.remove('is-active');
+      card.classList.add('admin-tab-content');
+    }
+  });
+
+  document.querySelectorAll('.drawer-nav-item[data-tab]').forEach((item) => {
+    const isActive = item.dataset.tab === tabId;
+    item.classList.toggle('is-active', isActive);
+  });
+
+  closeNavDrawer();
+}
+
+function initTabNavigation() {
+  const hamburgerMenuBtn = document.getElementById('hamburgerMenuBtn');
+  const adminNavDrawer = document.getElementById('adminNavDrawer');
+  const adminNavBackdrop = document.getElementById('adminNavBackdrop');
+  const drawerCloseBtn = document.getElementById('drawerCloseBtn');
+
+  if (hamburgerMenuBtn && adminNavDrawer && adminNavBackdrop) {
+    hamburgerMenuBtn.addEventListener('click', () => {
+      adminNavDrawer.classList.add('is-open');
+      adminNavBackdrop.classList.add('is-open');
+    });
+
+    const closeNavDrawerLocal = () => {
+      adminNavDrawer.classList.remove('is-open');
+      adminNavBackdrop.classList.remove('is-open');
+    };
+
+    if (drawerCloseBtn) drawerCloseBtn.addEventListener('click', closeNavDrawerLocal);
+    adminNavBackdrop.addEventListener('click', closeNavDrawerLocal);
+  }
+
+  document.querySelectorAll('.drawer-nav-item[data-tab]').forEach((item) => {
+    item.addEventListener('click', () => {
+      switchTab(item.dataset.tab);
+    });
+  });
+
+  switchTab(activeTab);
+}
+
+function closeNavDrawer() {
+  const adminNavDrawer = document.getElementById('adminNavDrawer');
+  const adminNavBackdrop = document.getElementById('adminNavBackdrop');
+  if (adminNavDrawer && adminNavBackdrop) {
+    adminNavDrawer.classList.remove('is-open');
+    adminNavBackdrop.classList.remove('is-open');
+  }
+}
+
 async function boot() {
   await handleCallback();
   tokenSet = getStoredTokens();
@@ -755,6 +828,8 @@ async function boot() {
     adminPanel.hidden = true;
     loginButton.hidden = false;
     logoutButton.hidden = true;
+    const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
+    if (hamburgerBtn) hamburgerBtn.style.display = 'none';
     return;
   }
 
@@ -764,17 +839,26 @@ async function boot() {
   config = await loadConfig();
   loginPanel.hidden = true;
   adminPanel.hidden = false;
+
+  // Hide top header buttons and show hamburger button
+  const headerDashboardBtn = document.getElementById('headerDashboardBtn');
+  if (headerDashboardBtn) headerDashboardBtn.style.display = 'none';
   loginButton.hidden = true;
-  logoutButton.hidden = false;
+  logoutButton.hidden = true;
+
+  const hamburgerBtn = document.getElementById('hamburgerMenuBtn');
+  if (hamburgerBtn) hamburgerBtn.style.display = 'flex';
+
   adminUser.textContent = `Angemeldet als ${claims.preferred_username || claims.email}`;
   renderEditor();
   initCollapsibleCards();
+  initTabNavigation();
   refreshOps();
   startOpsAutoRefresh();
 }
 
 loginButton.addEventListener('click', login);
-logoutButton.addEventListener('click', () => {
+const performLogout = () => {
   const idToken = tokenSet?.id_token;
   clearTokens();
   const params = new URLSearchParams({
@@ -783,7 +867,13 @@ logoutButton.addEventListener('click', () => {
   });
   if (idToken) params.set('id_token_hint', idToken);
   window.location.href = `${AUTHORITY}/protocol/openid-connect/logout?${params}`;
-});
+};
+
+logoutButton.addEventListener('click', performLogout);
+const drawerLogoutBtn = document.getElementById('drawerLogoutBtn');
+if (drawerLogoutBtn) {
+  drawerLogoutBtn.addEventListener('click', performLogout);
+}
 
 checkAllButton.addEventListener('click', () => {
   [...serviceEditor.querySelectorAll('.admin-row')].forEach((row) => checkRow(row));
diff --git a/style.css b/style.css
index a131d6d..06fd30e 100644
--- a/style.css
+++ b/style.css
@@ -1050,4 +1050,221 @@ main {
     margin-top: 8px;
 }
 
+/* ==========================================================================
+   Hamburger Navigation & Drawer Menu
+   ========================================================================== */
 
+/* Hamburger Button */
+.hamburger-menu-btn {
+    display: none; /* Controlled by admin.js */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    width: 42px;
+    height: 42px;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    z-index: 1001;
+}
+
+.hamburger-menu-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--border-strong);
+    transform: translateY(-1px);
+}
+
+.hamburger-menu-btn:active {
+    transform: translateY(1px);
+}
+
+.hamburger-bar {
+    width: 18px;
+    height: 2px;
+    background-color: var(--text);
+    border-radius: 99px;
+    transition: all 0.2s ease;
+}
+
+/* Drawer Backdrop */
+.admin-nav-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(4, 5, 11, 0.65);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    pointer-events: none;
+}
+
+.admin-nav-backdrop.is-open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+/* Nav Drawer Container */
+.admin-nav-drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: min(340px, 85vw);
+    background: linear-gradient(180deg, rgba(17, 22, 36, 0.96) 0%, rgba(10, 14, 26, 0.98) 100%);
+    border-left: 1px solid var(--border-strong);
+    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.55);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    z-index: 10000;
+    padding: 30px 24px;
+    display: flex;
+    flex-direction: column;
+    transform: translateX(100%);
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.admin-nav-drawer.is-open {
+    transform: translateX(0);
+}
+
+/* Drawer Header */
+.drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 28px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.drawer-header h3 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: #fff;
+    letter-spacing: -0.01em;
+}
+
+.drawer-close-btn {
+    background: transparent;
+    border: none;
+    color: var(--dim);
+    font-size: 1.8rem;
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    padding: 0;
+    line-height: 1;
+}
+
+.drawer-close-btn:hover {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.08);
+}
+
+/* Drawer Navigation list */
+.drawer-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex-grow: 1;
+}
+
+.drawer-nav-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    width: 100%;
+    padding: 12px 16px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    color: var(--muted);
+    text-decoration: none;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.drawer-nav-item:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: var(--border);
+    color: #fff;
+    transform: translateX(4px);
+}
+
+.drawer-nav-item.is-active {
+    background: rgba(103, 232, 249, 0.08);
+    border-color: rgba(103, 232, 249, 0.25);
+    color: #67e8f9;
+    font-weight: 600;
+}
+
+.drawer-nav-icon {
+    font-size: 1.15rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+}
+
+.drawer-nav-item:hover .drawer-nav-icon {
+    transform: scale(1.15);
+}
+
+.drawer-nav-text {
+    font-size: 0.94rem;
+}
+
+.drawer-divider {
+    height: 1px;
+    background: var(--border);
+    margin: 16px 0;
+}
+
+.drawer-logout-btn:hover {
+    background: rgba(251, 113, 133, 0.08);
+    border-color: rgba(251, 113, 133, 0.25);
+    color: #fb7185;
+}
+
+/* ==========================================================================
+   Tab View Rules for Admin Panels
+   ========================================================================== */
+.admin-tab-content {
+    display: none !important;
+}
+
+.admin-tab-content.is-active {
+    display: block !important;
+    grid-column: 1 / -1;
+    max-width: 900px;
+    margin-inline: auto;
+    width: 100%;
+    animation: cardFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes cardFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}