From 56cb4555f82afee6bc9d4e3ec9509d0489a91254 Mon Sep 17 00:00:00 2001
From: Clemens Hering <clemens.hering@valtrix.systems>
Date: Sat, 8 Nov 2025 12:32:59 +0100
Subject: [PATCH] optimisation for cell phones

---
 src/layouts/Base.astro | 57 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 9 deletions(-)
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index cda9877..bad24ba 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -50,22 +50,39 @@ const labels = isEn ? {
     <link rel="alternate" hreflang="en" href={`https://valtrix.systems${enHref}`} />
   </head>
   <body class="bg-white transition-colors duration-300">
-    <header class="max-w-7xl mx-auto px-6 py-6">
+    <header class="max-w-7xl mx-auto px-6 py-4">
       <nav class="flex items-center justify-between">
-        <a href={`${prefix || '/'}`} class="flex items-center gap-3 font-semibold">
+        <a href={`${prefix || '/'}`} class="flex items-center gap-3 font-semibold min-w-0">
           <img src="/logo-valtrix.png" alt="Valtrix" class="h-9 w-9 rounded-md shadow-sm"/>
           <span class="tracking-wide text-lg">VALTRIX</span>
         </a>
-        <div class="flex items-center gap-6">
+        <div class="hidden md:flex items-center gap-6">
           <a href={`${prefix}/leistungen`} class="text-textMuted hover:text-white">{labels.services}</a>
           <a href={`${prefix}/sicherheit`} class="text-textMuted hover:text-white">{labels.security}</a>
           <a href={`${prefix}/cases`} class="text-textMuted hover:text-white">{labels.cases}</a>
           <a href={`${prefix}/ueber-uns`} class="text-textMuted hover:text-white">{labels.about}</a>
           <a href={`${prefix}/kontakt`} class="px-4 py-2 rounded-brand bg-primary text-white hover:opacity-90">{labels.contact}</a>
           <a href={altHref} class="px-3 py-2 border rounded-brand hover:bg-graybg" aria-label="Language switch">{labels.langShort}</a>
-          <button id="themeToggle" aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button>
+          <button data-theme-toggle aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button>
         </div>
+        <button id="navToggle" class="md:hidden px-3 py-2 border rounded-brand hover:bg-graybg" aria-controls="mobileMenu" aria-expanded="false" aria-label="Navigation">
+          Menu
+        </button>
       </nav>
+      <!-- Mobile menu -->
+      <div id="mobileMenu" class="md:hidden hidden mt-3 border rounded-brand p-4 bg-[color:var(--color-bg,#0b0e14)]">
+        <div class="grid gap-3">
+          <a href={`${prefix}/leistungen`} class="block text-white">{labels.services}</a>
+          <a href={`${prefix}/sicherheit`} class="block text-white">{labels.security}</a>
+          <a href={`${prefix}/cases`} class="block text-white">{labels.cases}</a>
+          <a href={`${prefix}/ueber-uns`} class="block text-white">{labels.about}</a>
+          <a href={`${prefix}/kontakt`} class="block px-4 py-2 text-center rounded-brand bg-primary text-white hover:opacity-90">{labels.contact}</a>
+          <div class="flex items-center gap-3 pt-2 border-t mt-2">
+            <a href={altHref} class="px-3 py-2 border rounded-brand hover:bg-graybg" aria-label="Language switch">{labels.langShort}</a>
+            <button data-theme-toggle aria-label="Theme" class="px-3 py-2 border rounded-brand hover:bg-graybg">Light</button>
+          </div>
+        </div>
+      </div>
     </header>
     <main class="max-w-7xl mx-auto px-6">
       <slot />
@@ -77,14 +94,36 @@ const labels = isEn ? {
       © {new Date().getFullYear()} Valtrix · <a href={`${prefix}/impressum`} class="underline">{labels.imprint}</a> · <a href={`${prefix}/datenschutz`} class="underline">{labels.privacy}</a>
     </footer>
     <script>
-      const btn = document.getElementById('themeToggle');
+      // Theme toggle for all buttons
       const html = document.documentElement;
-      const set = (m)=>{ html.setAttribute('data-theme', m); btn.textContent = m==='dark' ? 'Light' : 'Dark'; };
-      set(localStorage.getItem('theme')||'dark');
-      btn?.addEventListener('click', ()=>{
+      const themeBtns = Array.from(document.querySelectorAll('[data-theme-toggle]'));
+      const setTheme = (m)=>{
+        html.setAttribute('data-theme', m);
+        themeBtns.forEach(b=> b.textContent = m==='dark' ? 'Light' : 'Dark');
+      };
+      setTheme(localStorage.getItem('theme')||'dark');
+      themeBtns.forEach(btn=> btn.addEventListener('click', ()=>{
         const next = html.getAttribute('data-theme')==='dark' ? 'light' : 'dark';
-        set(next); localStorage.setItem('theme', next);
+        setTheme(next); localStorage.setItem('theme', next);
+      }));
+
+      // Mobile nav toggle
+      const navToggle = document.getElementById('navToggle');
+      const mobileMenu = document.getElementById('mobileMenu');
+      const closeMenu = () => {
+        mobileMenu?.classList.add('hidden');
+        navToggle?.setAttribute('aria-expanded','false');
+      };
+      navToggle?.addEventListener('click', ()=>{
+        const isOpen = !mobileMenu.classList.contains('hidden');
+        if (isOpen) { closeMenu(); }
+        else {
+          mobileMenu.classList.remove('hidden');
+          navToggle.setAttribute('aria-expanded','true');
+        }
       });
+      // Close menu on link click
+      mobileMenu?.querySelectorAll('a').forEach(a=> a.addEventListener('click', closeMenu));
     </script>
   </body>
 </html>
