feat(admin): add persistent drawer burger sidebar navigation across all admin pages

This commit is contained in:
Daniel S
2026-08-09 22:33:52 +02:00
parent e8f332da43
commit d5b66ff830
5 changed files with 128 additions and 4 deletions

View File

@@ -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>

View File

@@ -1,6 +1,7 @@
--- ---
// src/pages/admin/editor.astro // src/pages/admin/editor.astro
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import AdminSidebar from '../../components/admin/AdminSidebar.astro';
import { loadWaasConfigs } from '../../utils/configLoader'; import { loadWaasConfigs } from '../../utils/configLoader';
import { THEME_PRESETS } from '../../utils/themePresets'; 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`}> <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"> <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="p-4 space-y-6 overflow-y-auto">
<div class="flex items-center justify-between border-b border-slate-800 pb-4"> <div class="flex items-center justify-between border-b border-slate-800 pb-4">

View File

@@ -1,5 +1,6 @@
--- ---
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import AdminSidebar from '../../components/admin/AdminSidebar.astro';
import { loadWaasConfigs } from '../../utils/configLoader'; import { loadWaasConfigs } from '../../utils/configLoader';
import { THEME_PRESETS } from '../../utils/themePresets'; 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"> <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"> <div class="max-w-6xl mx-auto space-y-10">
<!-- Admin Header & Quick Navigation --> <!-- Admin Header & Quick Navigation -->

View File

@@ -1,6 +1,7 @@
--- ---
// src/pages/admin/pages.astro // src/pages/admin/pages.astro
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import AdminSidebar from '../../components/admin/AdminSidebar.astro';
import { loadWaasConfigs } from '../../utils/configLoader'; import { loadWaasConfigs } from '../../utils/configLoader';
export const prerender = false; export const prerender = false;
@@ -12,7 +13,9 @@ const currentHomepageId = (siteConfig as any).site_info?.homepage_id;
--- ---
<Layout title="Seiten-Verwaltung | Admin Dashboard"> <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 class="flex items-center justify-between mb-8">
<div> <div>
<h1 class="text-2xl font-bold text-white">Seiten-Verwaltung</h1> <h1 class="text-2xl font-bold text-white">Seiten-Verwaltung</h1>

View File

@@ -1,6 +1,7 @@
--- ---
// src/pages/admin/settings.astro // src/pages/admin/settings.astro
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import AdminSidebar from '../../components/admin/AdminSidebar.astro';
import { loadWaasConfigs } from '../../utils/configLoader'; import { loadWaasConfigs } from '../../utils/configLoader';
export const prerender = false; export const prerender = false;
@@ -11,7 +12,9 @@ const info = (siteConfig as any).site_info || {};
--- ---
<Layout title="Globale Einstellungen | N&D Admin"> <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 class="flex items-center justify-between mb-8 border-b border-slate-800 pb-4">
<div> <div>
<a href="/admin/pages" class="text-xs text-slate-400 hover:text-sky-400 transition-colors">← Zurück zum Seiten-Dashboard</a> <a href="/admin/pages" class="text-xs text-slate-400 hover:text-sky-400 transition-colors">← Zurück zum Seiten-Dashboard</a>