From d5b66ff830d404a24a7a07688c69eb5f65a21ba5 Mon Sep 17 00:00:00 2001
From: Daniel S <daniel.schumacher@caspos.de>
Date: Sun, 9 Aug 2026 22:33:52 +0200
Subject: [PATCH] feat(admin): add persistent drawer burger sidebar navigation
 across all admin pages

---
 src/components/admin/AdminSidebar.astro | 112 ++++++++++++++++++++++++
 src/pages/admin/editor.astro            |   5 +-
 src/pages/admin/index.astro             |   5 +-
 src/pages/admin/pages.astro             |   5 +-
 src/pages/admin/settings.astro          |   5 +-
 5 files changed, 128 insertions(+), 4 deletions(-)
 create mode 100644 src/components/admin/AdminSidebar.astro

diff --git a/src/components/admin/AdminSidebar.astro b/src/components/admin/AdminSidebar.astro
new file mode 100644
index 0000000..3a02281
--- /dev/null
+++ b/src/components/admin/AdminSidebar.astro
@@ -0,0 +1,112 @@
+---
+// src/components/admin/AdminSidebar.astro
+const { currentPath = '' } = Astro.props;
+
+const navItems = [
+  { href: '/admin', label: 'Allgemein & Konfig', icon: '🎛️' },
+  { href: '/admin/pages', label: 'Seiten-Verwaltung', icon: '📄' },
+  { href: '/admin/editor', label: 'Visueller Editor', icon: '🎨' },
+  { href: '/admin/settings', label: 'Stammdaten & SEO', icon: '⚙️' },
+];
+---
+
+<!-- Burger Button (Mobile / Sidebar Toggle) -->
+<button
+  id="admin-menu-toggle"
+  type="button"
+  aria-label="Admin Menü öffnen"
+  class="fixed top-3 left-3 z-50 p-2.5 rounded-xl bg-slate-900/90 border border-white/10 text-white hover:border-sky-400 focus:outline-none focus:ring-2 focus:ring-sky-400 backdrop-blur-md transition-all"
+>
+  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+  </svg>
+</button>
+
+<!-- Backdrop Overlay for Mobile -->
+<div
+  id="admin-sidebar-backdrop"
+  class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-40 hidden transition-opacity"
+></div>
+
+<!-- Drawer Sidebar -->
+<aside
+  id="admin-sidebar"
+  class="fixed top-0 left-0 h-full w-72 bg-slate-950 border-r border-white/10 p-6 z-50 transform -translate-x-full transition-transform duration-300 ease-in-out flex flex-col justify-between shadow-2xl"
+>
+  <div class="space-y-6">
+    <!-- Header with Close Button -->
+    <div class="flex items-center justify-between border-b border-white/10 pb-4">
+      <div>
+        <span class="text-[10px] font-mono text-sky-400 uppercase tracking-widest block">N&D WaaS Admin</span>
+        <h2 class="text-lg font-bold text-white">Navigation</h2>
+      </div>
+      <button
+        id="admin-menu-close"
+        type="button"
+        class="p-2 text-slate-400 hover:text-white rounded-lg hover:bg-slate-900 transition-colors"
+        aria-label="Menü schließen"
+      >
+        ✕
+      </button>
+    </div>
+
+    <!-- Navigation Links -->
+    <nav class="space-y-1.5" aria-label="Admin Sidebar">
+      {navItems.map((item) => {
+        const isActive = currentPath === item.href || (item.href !== '/admin' && currentPath.startsWith(item.href));
+        return (
+          <a
+            href={item.href}
+            class={`flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-semibold transition-all ${
+              isActive
+                ? 'bg-sky-400/10 text-sky-400 border border-sky-400/30'
+                : 'text-slate-300 hover:bg-slate-900 hover:text-white border border-transparent'
+            }`}
+          >
+            <span class="text-base">{item.icon}</span>
+            <span>{item.label}</span>
+          </a>
+        );
+      })}
+    </nav>
+  </div>
+
+  <!-- Bottom Quick Links -->
+  <div class="pt-4 border-t border-white/10 space-y-2">
+    <a
+      href="/?preview=draft"
+      target="_blank"
+      class="flex items-center justify-center gap-2 w-full p-2.5 rounded-xl bg-amber-500/10 text-amber-400 border border-amber-500/20 text-xs font-semibold hover:bg-amber-500 hover:text-slate-950 transition-all"
+    >
+      🛠️ Entwurf-Vorschau
+    </a>
+    <a
+      href="/"
+      target="_blank"
+      class="flex items-center justify-center gap-2 w-full p-2.5 rounded-xl bg-slate-900 text-slate-300 border border-white/10 text-xs font-semibold hover:border-sky-400 hover:text-white transition-all"
+    >
+      🌐 Live-Website
+    </a>
+  </div>
+</aside>
+
+<script>
+  const toggleBtn = document.getElementById('admin-menu-toggle');
+  const closeBtn = document.getElementById('admin-menu-close');
+  const sidebar = document.getElementById('admin-sidebar');
+  const backdrop = document.getElementById('admin-sidebar-backdrop');
+
+  function openMenu() {
+    sidebar?.classList.remove('-translate-x-full');
+    backdrop?.classList.remove('hidden');
+  }
+
+  function closeMenu() {
+    sidebar?.classList.add('-translate-x-full');
+    backdrop?.classList.add('hidden');
+  }
+
+  toggleBtn?.addEventListener('click', openMenu);
+  closeBtn?.addEventListener('click', closeMenu);
+  backdrop?.addEventListener('click', closeMenu);
+</script>
diff --git a/src/pages/admin/editor.astro b/src/pages/admin/editor.astro
index 687c22f..f22406b 100644
--- a/src/pages/admin/editor.astro
+++ b/src/pages/admin/editor.astro
@@ -1,6 +1,7 @@
 ---
 // src/pages/admin/editor.astro
 import Layout from '../../layouts/Layout.astro';
+import AdminSidebar from '../../components/admin/AdminSidebar.astro';
 import { loadWaasConfigs } from '../../utils/configLoader';
 import { THEME_PRESETS } from '../../utils/themePresets';
 
@@ -18,9 +19,11 @@ const previewUrl = `${targetPage?.slug || '/'}?preview=draft`;
 ---
 
 <Layout title={`Editor: ${targetPage?.title || 'Baukasten'} | N&D Admin`}>
-  <div class="h-screen w-screen flex overflow-hidden bg-slate-950 font-sans">
+  <AdminSidebar currentPath="/admin/editor" />
+  <div class="h-screen w-screen flex overflow-hidden bg-slate-950 font-sans pl-12">
     
     <aside class="w-80 border-r border-slate-800 bg-slate-900 flex flex-col justify-between z-20">
+
       
       <div class="p-4 space-y-6 overflow-y-auto">
         <div class="flex items-center justify-between border-b border-slate-800 pb-4">
diff --git a/src/pages/admin/index.astro b/src/pages/admin/index.astro
index 208f278..b405454 100644
--- a/src/pages/admin/index.astro
+++ b/src/pages/admin/index.astro
@@ -1,5 +1,6 @@
 ---
 import Layout from '../../layouts/Layout.astro';
+import AdminSidebar from '../../components/admin/AdminSidebar.astro';
 import { loadWaasConfigs } from '../../utils/configLoader';
 import { THEME_PRESETS } from '../../utils/themePresets';
 
@@ -8,7 +9,9 @@ const presets = Object.values(THEME_PRESETS);
 ---
 
 <Layout title="Waas Admin Dashboard | Layout and Config Management">
-  <div class="min-h-screen bg-[#0B0F19] text-white p-6 sm:p-10 font-sans">
+  <AdminSidebar currentPath="/admin" />
+  <div class="min-h-screen bg-[#0B0F19] text-white p-6 sm:p-10 pl-16 sm:pl-20 font-sans">
+
     <div class="max-w-6xl mx-auto space-y-10">
       
       <!-- Admin Header & Quick Navigation -->
diff --git a/src/pages/admin/pages.astro b/src/pages/admin/pages.astro
index 93bd558..bc8e934 100644
--- a/src/pages/admin/pages.astro
+++ b/src/pages/admin/pages.astro
@@ -1,6 +1,7 @@
 ---
 // src/pages/admin/pages.astro
 import Layout from '../../layouts/Layout.astro';
+import AdminSidebar from '../../components/admin/AdminSidebar.astro';
 import { loadWaasConfigs } from '../../utils/configLoader';
 
 export const prerender = false;
@@ -12,7 +13,9 @@ const currentHomepageId = (siteConfig as any).site_info?.homepage_id;
 ---
 
 <Layout title="Seiten-Verwaltung | Admin Dashboard">
-  <div class="max-w-6xl mx-auto px-4 py-8">
+  <AdminSidebar currentPath="/admin/pages" />
+  <div class="max-w-6xl mx-auto px-4 py-8 pl-16 sm:pl-20">
+
     <div class="flex items-center justify-between mb-8">
       <div>
         <h1 class="text-2xl font-bold text-white">Seiten-Verwaltung</h1>
diff --git a/src/pages/admin/settings.astro b/src/pages/admin/settings.astro
index d3436ba..445984a 100644
--- a/src/pages/admin/settings.astro
+++ b/src/pages/admin/settings.astro
@@ -1,6 +1,7 @@
 ---
 // src/pages/admin/settings.astro
 import Layout from '../../layouts/Layout.astro';
+import AdminSidebar from '../../components/admin/AdminSidebar.astro';
 import { loadWaasConfigs } from '../../utils/configLoader';
 
 export const prerender = false;
@@ -11,7 +12,9 @@ const info = (siteConfig as any).site_info || {};
 ---
 
 <Layout title="Globale Einstellungen | N&D Admin">
-  <div class="max-w-4xl mx-auto px-4 py-8">
+  <AdminSidebar currentPath="/admin/settings" />
+  <div class="max-w-4xl mx-auto px-4 py-8 pl-16 sm:pl-20">
+
     <div class="flex items-center justify-between mb-8 border-b border-slate-800 pb-4">
       <div>
         <a href="/admin/pages" class="text-xs text-slate-400 hover:text-sky-400 transition-colors">← Zurück zum Seiten-Dashboard</a>