feat(waas-engine): add editable Header, Footer & Glassmorphism design controls in editor Inspector

2026-08-08 23:52:22 +02:00
parent 4c165d8107
commit 92a75cf289
4 changed files with 148 additions and 27 deletions
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,13 @@
 ---
 // src/components/Footer.astro
+import { loadWaasConfigs } from '../utils/configLoader';
+
+const { siteConfig } = loadWaasConfigs();
+const footer = siteConfig.footer || {
+  brandDescription: 'Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.',
+  copyrightText: 'N&D i-t SOLUTIONS. Alle Rechte vorbehalten.',
+  showLegalLinks: true
+};
 const currentYear = new Date().getFullYear();
 ---

@@ -10,10 +18,10 @@ const currentYear = new Date().getFullYear();
      <!-- Brand logo/name -->
      <div>
        <a href="#" class="text-lg font-bold tracking-wider text-slate-900 dark:text-white">
-          N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
+          {siteConfig.header?.brandName || 'N&D'} <span class="text-brand-arcticBlue">{siteConfig.header?.brandHighlight || 'i-t SOLUTIONS'}</span>
        </a>
        <p class="mt-2 text-xs text-slate-500 dark:text-gray-500 max-w-sm">
-          Ihr Partner für professionelles Webdesign, Website-Entwicklung und lokale SEO für Kleinbetriebe & KMU.
+          {footer.brandDescription}
        </p>
      </div>

@@ -31,13 +39,15 @@ const currentYear = new Date().getFullYear();
    <!-- Bottom Copyright & Legal Links -->
    <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500 dark:text-gray-500">
      <div>
-        &copy; {currentYear} N&D i-t SOLUTIONS. Alle Rechte vorbehalten.
-      </div>
-      <div class="flex gap-6">
-        <a href="/privacy" class="hover:text-slate-900 dark:hover:text-white transition-colors">Datenschutz</a>
-        <span class="text-slate-300 dark:text-white/10">|</span>
-        <a href="/privacy#impressum" class="hover:text-slate-900 dark:hover:text-white transition-colors">Impressum</a>
+        &copy; {currentYear} {footer.copyrightText}
      </div>
+      {footer.showLegalLinks !== false && (
+        <div class="flex gap-6">
+          <a href="/privacy" class="hover:text-slate-900 dark:hover:text-white transition-colors">Datenschutz</a>
+          <span class="text-slate-300 dark:text-white/10">|</span>
+          <a href="/privacy#impressum" class="hover:text-slate-900 dark:hover:text-white transition-colors">Impressum</a>
+        </div>
+      )}
    </div>
  </div>
 </footer>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,16 +1,27 @@
 ---
 // src/components/Navbar.astro
 import { FaBars, FaTimes } from 'react-icons/fa';
+import { loadWaasConfigs } from '../utils/configLoader';
+
+const { siteConfig } = loadWaasConfigs();
+const header = siteConfig.header || {
+  brandName: 'N&D',
+  brandHighlight: 'i-t SOLUTIONS',
+  ctaText: 'Erstgespräch buchen',
+  ctaLink: '#contact',
+  showThemeToggle: true,
+  glassEffect: true
+};
 ---

-<header id="main-header" class="fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder">
+<header id="main-header" class={`fixed top-0 left-0 w-full z-50 transition-all duration-300 py-3 ${header.glassEffect !== false ? 'bg-white/30 dark:bg-brand-darkBg/30 backdrop-blur-xl border-b border-slate-200 dark:border-brand-darkBorder' : 'bg-slate-900 border-b border-white/10'}`}>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-14">
      
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2 group">
        <span class="text-lg sm:text-xl font-bold tracking-wider text-slate-900 dark:text-white select-none transition-colors duration-300">
-          N&D <span class="text-brand-arcticBlue">i-t SOLUTIONS</span>
+          {header.brandName || 'N&D'} <span class="text-brand-arcticBlue">{header.brandHighlight || 'i-t SOLUTIONS'}</span>
        </span>
      </a>

@@ -23,22 +34,26 @@ import { FaBars, FaTimes } from 'react-icons/fa';

      <!-- Right controls -->
      <div class="flex items-center gap-4">
-        <!-- Theme Toggle Button (44x44px target) -->
-        <button id="theme-toggle" class="w-11 h-11 flex items-center justify-center rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Farbschema wechseln">
-          <!-- Moon Icon -->
-          <svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-          </svg>
-          <!-- Sun Icon -->
-          <svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
-          </svg>
-        </button>
+        {header.showThemeToggle !== false && (
+          <!-- Theme Toggle Button (44x44px target) -->
+          <button id="theme-toggle" class="w-11 h-11 flex items-center justify-center rounded-lg border border-slate-200 dark:border-brand-darkBorder bg-white/50 dark:bg-zinc-900/50 text-slate-700 dark:text-zinc-400 hover:text-brand-arcticBlue dark:hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Farbschema wechseln">
+            <!-- Moon Icon -->
+            <svg id="theme-toggle-dark-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+            <!-- Sun Icon -->
+            <svg id="theme-toggle-light-icon" class="hidden w-4 h-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+              <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.46 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
+            </svg>
+          </button>
+        )}

        <!-- CTA button -->
-        <a href="#contact" class="hidden sm:inline-flex items-center justify-center px-4 py-2 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Erstgespräch buchen">
-          Erstgespräch buchen
-        </a>
+        {header.ctaText && (
+          <a href={header.ctaLink || "#contact"} class="hidden sm:inline-flex items-center justify-center px-4 py-2 text-xs font-semibold tracking-wider text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder rounded bg-white/50 dark:bg-zinc-900/50 hover:border-brand-arcticBlue hover:text-brand-arcticBlue transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label={header.ctaText}>
+            {header.ctaText}
+          </a>
+        )}

        <!-- Mobile menu button (44x44px target) -->
        <button id="mobile-menu-btn" class="md:hidden w-11 h-11 flex items-center justify-center rounded bg-white dark:bg-zinc-900 text-slate-700 dark:text-white border border-slate-200 dark:border-brand-darkBorder hover:bg-slate-50 dark:hover:bg-zinc-800 transition-all focus:outline-none focus:ring-2 focus:ring-sky-500" aria-label="Menü öffnen">