✨ Story 2.1: navbar responsive

assets/css/input.css

@@ -152,6 +152,17 @@
   .breadcrumb-current {
     @apply text-text-primary;
   }
+
+  /* Navigation links */
+  .nav-link {
+    @apply px-4 py-2 text-sm font-medium text-text-secondary
+           hover:text-text-primary transition-colors rounded-lg
+           hover:bg-surface-light;
+  }
+
+  .nav-link-active {
+    @apply text-primary bg-primary/10;
+  }
 }
 
 @layer utilities {
@@ -187,4 +198,4 @@
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
-}
+}

assets/js/main.js

@@ -2,5 +2,75 @@
 // Script principal du portfolio
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('Portfolio chargé');
-});
+    initMobileMenu();
+    initNavbarScroll();
+});
+
+function initMobileMenu() {
+    const toggle = document.getElementById('mobile-menu-toggle');
+    const menu = document.getElementById('mobile-menu');
+
+    if (!toggle || !menu) return;
+
+    const hamburgerIcon = toggle.querySelector('.hamburger-icon');
+    const closeIcon = toggle.querySelector('.close-icon');
+
+    function openMenu() {
+        menu.classList.remove('hidden');
+        menu.setAttribute('aria-hidden', 'false');
+        toggle.setAttribute('aria-expanded', 'true');
+        toggle.setAttribute('aria-label', 'Fermer le menu');
+        hamburgerIcon?.classList.add('hidden');
+        closeIcon?.classList.remove('hidden');
+    }
+
+    function closeMenu() {
+        menu.classList.add('hidden');
+        menu.setAttribute('aria-hidden', 'true');
+        toggle.setAttribute('aria-expanded', 'false');
+        toggle.setAttribute('aria-label', 'Ouvrir le menu');
+        hamburgerIcon?.classList.remove('hidden');
+        closeIcon?.classList.add('hidden');
+    }
+
+    function toggleMenu() {
+        const isOpen = toggle.getAttribute('aria-expanded') === 'true';
+        if (isOpen) {
+            closeMenu();
+        } else {
+            openMenu();
+        }
+    }
+
+    toggle.addEventListener('click', toggleMenu);
+
+    menu.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', closeMenu);
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
+            closeMenu();
+            toggle.focus();
+        }
+    });
+
+    window.addEventListener('resize', () => {
+        if (window.innerWidth >= 1024) {
+            closeMenu();
+        }
+    });
+}
+
+function initNavbarScroll() {
+    const navbar = document.getElementById('navbar');
+    if (!navbar) return;
+
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 10) {
+            navbar.classList.add('shadow-lg');
+        } else {
+            navbar.classList.remove('shadow-lg');
+        }
+    }, { passive: true });
+}