From 95ea9f760aebe561b616edcd2126a20b54e5bd58 Mon Sep 17 00:00:00 2001 From: skycel Date: Thu, 22 Jan 2026 22:52:30 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AD=20Feature:=20Navbar=20responsive?= =?UTF-8?q?=20avec=20menu=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Story 2.1: - Navbar sticky avec logo et liens de navigation - Menu hamburger pour mobile (< 1024px) - JavaScript vanilla pour toggle menu et effet scroll - Accessibilité complète (aria-expanded, Escape, focus) - Classes CSS nav-link et nav-link-active - Intégration dans index.php avec $currentPage Co-Authored-By: Claude Opus 4.5 --- assets/css/input.css | 11 ++++++ assets/js/main.js | 81 ++++++++++++++++++++++++++++++++++++++++++ index.php | 4 +++ templates/navbar.php | 84 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 180 insertions(+) create mode 100644 templates/navbar.php diff --git a/assets/css/input.css b/assets/css/input.css index 4d0b179..b11bead 100644 --- a/assets/css/input.css +++ b/assets/css/input.css @@ -160,6 +160,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 { diff --git a/assets/js/main.js b/assets/js/main.js index a224f9c..052d614 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -3,4 +3,85 @@ document.addEventListener('DOMContentLoaded', () => { console.log('Portfolio chargé'); + initMobileMenu(); + initNavbarScroll(); }); + +/** + * Gestion du menu mobile + */ +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 au clic + toggle.addEventListener('click', toggleMenu); + + // Fermer au clic sur un lien + menu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', closeMenu); + }); + + // Fermer avec Escape + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') { + closeMenu(); + toggle.focus(); + } + }); + + // Fermer si on redimensionne vers desktop + window.addEventListener('resize', () => { + if (window.innerWidth >= 1024) { + closeMenu(); + } + }); +} + +/** + * Effet d'ombre au scroll + */ +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 }); +} diff --git a/index.php b/index.php index b8be60d..58f77e2 100644 --- a/index.php +++ b/index.php @@ -7,6 +7,10 @@ include_template('header', [ 'pageTitle' => 'Portfolio en construction', 'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !' ]); + +include_template('navbar', [ + 'currentPage' => 'home' +]); ?>
diff --git a/templates/navbar.php b/templates/navbar.php new file mode 100644 index 0000000..69440b3 --- /dev/null +++ b/templates/navbar.php @@ -0,0 +1,84 @@ + 'home', 'label' => 'Accueil', 'url' => '/'], + ['id' => 'projects', 'label' => 'Projets', 'url' => '/projets'], + ['id' => 'skills', 'label' => 'Compétences', 'url' => '/competences'], + ['id' => 'about', 'label' => 'Me Découvrir', 'url' => '/a-propos'], + ['id' => 'contact', 'label' => 'Contact', 'url' => '/contact', 'isCta' => true], +]; +?> + + + + +