From acf70b701987c694384c7961429f272b548e0ef3 Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Sun, 16 Nov 2025 01:03:16 +0000
Subject: [PATCH] feat: add responsive hamburger navigation menu with slide-in
 sidebar for mobile views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement a mobile-friendly navigation system that replaces the static nav menu with a hamburger toggle button on screens ≤768px. The menu slides in from the left as a fixed overlay panel with smooth CSS transitions, and automatically closes when any nav link is clicked. Includes animated hamburger icon transformation (rotating top/bottom bars, hiding middle bar) and adjusted hero section padding for better mobile layout.
---
 mywebdav/templates/base.html |  23 +++++++-
 static/css/splash.css        | 108 ++++++++++++++++++++++++++++++++++-
 2 files changed, 127 insertions(+), 4 deletions(-)

diff --git a/mywebdav/templates/base.html b/mywebdav/templates/base.html
index 1f3a0b0..8d453d4 100644
--- a/mywebdav/templates/base.html
+++ b/mywebdav/templates/base.html
@@ -17,7 +17,12 @@
                 <span class="logo-icon">◆</span>
                 <span class="logo-text">My<span class="logo-webdav">Webdav</span></span>
             </div>
-            <ul class="nav-menu">
+            <button class="hamburger" id="hamburger" aria-label="Toggle menu">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <ul class="nav-menu" id="navMenu">
                 <li><a href="/">Home</a></li>
                 <li><a href="/features">Features</a></li>
                 <li><a href="/pricing">Pricing</a></li>
@@ -47,6 +52,22 @@
         </div>
     </footer>
 
+    <script>
+        const hamburger = document.getElementById('hamburger');
+        const navMenu = document.getElementById('navMenu');
+
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            navMenu.classList.toggle('active');
+        });
+
+        navMenu.querySelectorAll('a').forEach(link => {
+            link.addEventListener('click', () => {
+                hamburger.classList.remove('active');
+                navMenu.classList.remove('active');
+            });
+        });
+    </script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>
diff --git a/static/css/splash.css b/static/css/splash.css
index 2e67a37..306cf39 100644
--- a/static/css/splash.css
+++ b/static/css/splash.css
@@ -66,6 +66,37 @@ body {
     color: #1565c0;
 }
 
+.hamburger {
+    display: none;
+    flex-direction: column;
+    gap: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    z-index: 1001;
+}
+
+.hamburger span {
+    width: 25px;
+    height: 3px;
+    background: #1976d2;
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.hamburger.active span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.hamburger.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -6px);
+}
+
 .hero-section {
     flex: 1;
     display: flex;
@@ -189,9 +220,49 @@ body {
 }
 
 @media (max-width: 768px) {
+    .nav-container {
+        padding: 0 1rem;
+    }
+
+    .hamburger {
+        display: flex;
+    }
+
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 0;
+        flex-direction: column;
+        background-color: white;
+        width: 70%;
+        max-width: 300px;
+        height: 100vh;
+        padding: 5rem 2rem 2rem;
+        gap: 1.5rem;
+        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+        transition: left 0.3s ease;
+        z-index: 1000;
+    }
+
+    .nav-menu.active {
+        left: 0;
+    }
+
+    .nav-menu li {
+        width: 100%;
+    }
+
+    .nav-menu a {
+        display: block;
+        padding: 0.75rem 0;
+        font-size: 1.125rem;
+    }
+
     .hero-section {
         flex-direction: column;
         text-align: center;
+        padding: 2rem 1rem;
+        gap: 2rem;
     }
 
     .hero-title {
@@ -202,17 +273,48 @@ body {
         font-size: 3rem;
     }
 
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+
     .hero-actions {
         justify-content: center;
         flex-wrap: wrap;
     }
 
-    .nav-menu {
-        gap: 1rem;
+    .footer {
+        padding: 1.5rem 1rem;
     }
 
     .footer-links {
         flex-direction: column;
-        gap: 0.5rem;
+        gap: 0.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .logo {
+        font-size: 1.25rem;
+    }
+
+    .logo-icon {
+        font-size: 1.5rem;
+    }
+
+    .hero-title {
+        font-size: 1.5rem;
+    }
+
+    .hero-price {
+        font-size: 2.5rem;
+    }
+
+    .btn {
+        padding: 0.75rem 1.5rem;
+        font-size: 0.875rem;
+    }
+
+    .nav-menu {
+        width: 80%;
     }
 }