feat: add responsive hamburger navigation menu with slide-in sidebar for mobile views

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

@@ -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>