From 61057f775b2262ba084653fc6b097c1e8bf0bb22 Mon Sep 17 00:00:00 2001
From: AIIrondev <iron.ai.dev@gmail.com>
Date: Tue, 28 Apr 2026 21:14:57 +0200
Subject: [PATCH] feat: Implement mobile navigation toggle with enhanced
 accessibility and styling

---
 Website/templates/base.html | 135 ++++++++++++++++++++++++++++++++++--
 1 file changed, 131 insertions(+), 4 deletions(-)

diff --git a/Website/templates/base.html b/Website/templates/base.html
index bef26b9..fff8d13 100644
--- a/Website/templates/base.html
+++ b/Website/templates/base.html
@@ -171,6 +171,30 @@
             gap: 0.65rem;
         }
 
+        .nav-toggle {
+            display: none;
+            border: none;
+            background: transparent;
+            color: var(--text-main);
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            width: 44px;
+            height: 44px;
+            border-radius: 14px;
+            transition: background 0.2s ease;
+        }
+
+        .nav-toggle:hover,
+        .nav-toggle:focus-visible {
+            background: rgba(28, 90, 99, 0.08);
+        }
+
+        .nav-toggle svg {
+            width: 1.1rem;
+            height: 1.1rem;
+        }
+
         .nav-btn {
             display: inline-flex;
             align-items: center;
@@ -341,19 +365,65 @@
         @media (max-width: 820px) {
             .site-nav-inner {
                 min-height: 64px;
+                flex-wrap: wrap;
+                align-items: center;
+                gap: 0.8rem;
+            }
+
+            .nav-toggle {
+                display: inline-flex;
             }
 
             .nav-links {
-                display: none;
+                position: absolute;
+                left: 50%;
+                top: calc(100% + 0.8rem);
+                transform: translateX(-50%) translateY(-5px);
+                width: min(100%, calc(100% - 2rem));
+                max-width: 420px;
+                background: rgba(255, 255, 255, 0.96);
+                border: 1px solid #d8dfdb;
+                border-radius: 18px;
+                padding: 1rem;
+                display: grid;
+                gap: 0.5rem;
+                z-index: 25;
+                opacity: 0;
+                visibility: hidden;
+                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+            }
+
+            .nav-links.open {
+                opacity: 1;
+                visibility: visible;
+                transform: translateX(-50%) translateY(0);
+            }
+
+            .nav-links a {
+                display: block;
+                padding: 0.85rem 1rem;
+                border-radius: 14px;
+                background: #f7f5f0;
+                color: var(--text-main);
+                font-weight: 700;
+            }
+
+            .nav-links a:hover,
+            .nav-links a:focus-visible {
+                background: #e7f0ec;
             }
 
             .nav-actions {
-                gap: 0.4rem;
+                gap: 0.55rem;
+                width: 100%;
+                justify-content: flex-end;
+                flex-wrap: wrap;
             }
 
-            .nav-btn {
+            .nav-actions .nav-btn {
                 padding: 0.42rem 0.72rem;
                 font-size: 0.85rem;
+                min-width: 120px;
             }
 
             .dropdown-menu {
@@ -362,6 +432,10 @@
                 min-width: 200px;
             }
 
+            .main-wrap {
+                padding: 1.4rem 0 2.2rem;
+            }
+
             .cookie-banner {
                 flex-direction: column;
                 align-items: flex-start;
@@ -375,6 +449,25 @@
                 width: 100%;
             }
         }
+
+        @media (max-width: 520px) {
+            .site-shell {
+                width: min(100%, calc(100% - 1rem));
+            }
+
+            .nav-links {
+                top: calc(100% + 0.6rem);
+                padding: 0.9rem;
+            }
+
+            .nav-actions {
+                justify-content: stretch;
+            }
+
+            .nav-actions .nav-btn {
+                width: 100%;
+            }
+        }
     </style>
     {% endblock %}
 </head>
@@ -385,7 +478,12 @@
                 <img src="{{ url_for('static', filename='images/Logo-clear.png') }}" alt="Invario Logo">
                 <span>Invario</span>
             </a>
-            <div class="nav-links" aria-label="Main Navigation">
+            <button type="button" class="nav-toggle" id="mobileMenuToggle" aria-expanded="false" aria-controls="mainNav" aria-label="Navigation öffnen">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                    <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+                </svg>
+            </button>
+            <div class="nav-links" id="mainNav" aria-label="Main Navigation" aria-hidden="true">
                 <a href="{{ url_for('default') }}">Start</a>
                 <a href="{{ url_for('dienstleistungen') }}">Für Schulen</a>
                 <a href="{{ url_for('kontakt') }}">Kontakt</a>
@@ -564,6 +662,35 @@
     <script src="{{ url_for('static', filename='js/ios_fixes.js') }}"></script>
     <script>
         (function () {
+            var menuToggle = document.getElementById('mobileMenuToggle');
+            var navLinks = document.getElementById('mainNav');
+            if (menuToggle && navLinks) {
+                menuToggle.addEventListener('click', function () {
+                    var isExpanded = this.getAttribute('aria-expanded') === 'true';
+                    this.setAttribute('aria-expanded', String(!isExpanded));
+                    navLinks.classList.toggle('open');
+                    navLinks.setAttribute('aria-hidden', String(isExpanded));
+                });
+
+                navLinks.querySelectorAll('a').forEach(function (link) {
+                    link.addEventListener('click', function () {
+                        if (navLinks.classList.contains('open')) {
+                            menuToggle.setAttribute('aria-expanded', 'false');
+                            navLinks.classList.remove('open');
+                            navLinks.setAttribute('aria-hidden', 'true');
+                        }
+                    });
+                });
+
+                window.addEventListener('resize', function () {
+                    if (window.innerWidth > 820 && navLinks.classList.contains('open')) {
+                        menuToggle.setAttribute('aria-expanded', 'false');
+                        navLinks.classList.remove('open');
+                        navLinks.removeAttribute('aria-hidden');
+                    }
+                });
+            }
+
             var banner = document.getElementById("cookieBanner");
             var acceptBtn = document.getElementById("cookieAcceptBtn");
             var declineBtn = document.getElementById("cookieDeclineBtn");