.

static/js/header.js

@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const header = document.querySelector('.header');
+    const navToggle = document.getElementById('nav-toggle');
+    const navMenu = document.getElementById('nav-menu');
+
+    // Scroll behavior
+    let lastScroll = 0;
+    window.addEventListener('scroll', () => {
+        const currentScroll = window.pageYOffset;
+        
+        if (currentScroll <= 0) {
+            header.classList.remove('scrolled');
+            return;
+        }
+        
+        if (currentScroll > lastScroll && !header.contains(document.activeElement)) {
+            header.style.transform = 'translateY(-100%)';
+        } else {
+            header.style.transform = 'translateY(0)';
+            header.classList.add('scrolled');
+        }
+        lastScroll = currentScroll;
+    });
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!header.contains(e.target)) {
+            navToggle.checked = false;
+        }
+    });
+
+    // Close mobile menu when window is resized to desktop
+    window.addEventListener('resize', () => {
+        if (window.innerWidth >= 1024) {
+            navToggle.checked = false;
+        }
+    });
+});