feat(admin): add persistent drawer burger sidebar navigation across all admin pages
This commit is contained in:
112
src/components/admin/AdminSidebar.astro
Normal file
112
src/components/admin/AdminSidebar.astro
Normal 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>
|
||||||
@@ -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,10 +19,12 @@ 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">
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -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 -->
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user