🧭 Feature: Navbar responsive avec menu mobile
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 <noreply@anthropic.com>
This commit is contained in:
@@ -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 });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user