feat: add hamburger menu navigation drawer and tabbed views for admin sections

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));