From dabedfa4afc73f9244fda62aa45e7e4fb011bb7c Mon Sep 17 00:00:00 2001 From: Antoine M Date: Mon, 11 May 2026 16:52:38 +0200 Subject: [PATCH] First header refactor --- header.php | 7 +-- resources/css/layout/menu-mobile-brand.css | 42 +++++++++++++++- resources/css/layout/nav/header.css | 3 +- resources/css/layout/nav/primary-menu.css | 36 ++++++++------ resources/css/layout/nav/secondary-menu.css | 9 ++-- resources/js/header.js | 53 +++++++++++++-------- template-parts/header/mobile-menu-brand.php | 2 +- 7 files changed, 108 insertions(+), 44 deletions(-) diff --git a/header.php b/header.php index d0f378f..8a3d130 100644 --- a/header.php +++ b/header.php @@ -22,9 +22,10 @@
- - - +
+ + +
diff --git a/resources/css/layout/menu-mobile-brand.css b/resources/css/layout/menu-mobile-brand.css index 061b824..ee07837 100644 --- a/resources/css/layout/menu-mobile-brand.css +++ b/resources/css/layout/menu-mobile-brand.css @@ -6,7 +6,15 @@ } #mobile-menu-toggle { - @apply underline underline-offset-4; + @apply underline underline-offset-4 bg-red-500 flex gap-2 items-center; + &[aria-expanded] { + @apply bg-green-500; + &::after { + @apply block w-10 h-10 bg-red-500 content-['Fermer']; + content: 'Fermer'; + + } + } } &__inner-elements { @apply flex justify-between items-center px-6 gap-12; @@ -25,3 +33,35 @@ } } } +.secondary-menu-container { + @apply w-full; +} + +body:has(.menu-mobile-brand) { + @screen lg { + /* @apply hidden; */ + } +} + +header.nav-open { + .secondary-menu-container, + .primary-menu-container, + #primary-menu { + @apply !block opacity-100; + } + .menus-wrapper { + @apply bg-primary; + min-height: calc(100vh - 100px); + @screen lg { + min-height: auto; + } + } + + #primary-menu { + @apply w-full; + + ul { + @apply mx-0; + } + } +} diff --git a/resources/css/layout/nav/header.css b/resources/css/layout/nav/header.css index e1b925a..3ec38ff 100644 --- a/resources/css/layout/nav/header.css +++ b/resources/css/layout/nav/header.css @@ -24,7 +24,8 @@ } body:has(header[nav-open='true']) { - overflow-y: hidden; + /* overflow-y: hidden; */ + /* probleme sur mobile, on ne peut pas scroll en bas de la page */ header { /* @apply min-h-screen; */ } diff --git a/resources/css/layout/nav/primary-menu.css b/resources/css/layout/nav/primary-menu.css index ca8acf6..6a4b1fa 100644 --- a/resources/css/layout/nav/primary-menu.css +++ b/resources/css/layout/nav/primary-menu.css @@ -61,7 +61,7 @@ li.menu-item { @apply font-medium text-lg - text-center; + lg:text-center; &:hover > button, &:hover > a, @@ -141,12 +141,12 @@ @apply bg-carhop-green-700 p-6 px-6 - mx-auto lg:mx-0 static w-full - grid-cols-2 + lg:grid-cols-2 + grid-cols-1 lg:absolute; z-index: 999; display: none; @@ -183,9 +183,11 @@ @apply max-w-3xl w-full lg:text-left; border-bottom: 1px solid #fff; - &:nth-last-child(-n + 2), - &:last-child { - border-bottom: none; + @screen lg { + &:nth-last-child(-n + 2), + &:last-child { + border-bottom: none; + } } &:nth-child(odd) { @@ -258,14 +260,14 @@ width: fit-content; > ul { - @apply max-w-xs + @apply lg:max-w-xs mx-auto; /* min-height: 96vh; */ - padding-top: 5vh; + padding-top: 2vh; } li.menu-item { @apply mt-0 - text-center + lg:text-center text-white font-medium py-8 @@ -273,6 +275,10 @@ pb-2 lg:pb-0; + &:first-child { + @apply pt-0 lg:pt-6; + } + .sub-menu li { @apply text-sm; } @@ -282,8 +288,8 @@ /* BURGER MENU */ body:has(.nav-open) { - @apply max-h-screen - overflow-hidden; + @apply max-h-screen; + /* overflow-hidden; */ /* #content, footer, @@ -355,9 +361,11 @@ li#menu-item-1836 { @apply border border-white relative; width: 100%; - grid-column: 1 / span 2; - margin: 0 auto; - max-width: 98rem !important; + @screen lg { + grid-column: 1 / span 2; + margin: 0 auto; + max-width: 98rem !important; + } &:after { transition: all 0.3s ease-out; diff --git a/resources/css/layout/nav/secondary-menu.css b/resources/css/layout/nav/secondary-menu.css index 4a7d37f..6b105c2 100644 --- a/resources/css/layout/nav/secondary-menu.css +++ b/resources/css/layout/nav/secondary-menu.css @@ -10,7 +10,7 @@ @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center; > ul { - @apply flex flex-col lg:flex-row justify-between gap-4; + @apply flex flex-col lg:flex-row justify-between gap-4 w-full lg:w-auto; } a { @apply font-normal text-lg; @@ -63,9 +63,10 @@ } } .sub-menu { - @apply flex flex-col border border-white bg-primary absolute top-10 left-0 z-30; - width: 330px; - + @apply flex flex-col lg:border border-white bg-primary lg:absolute top-10 left-0 z-30; + @screen lg { + width: 330px; + } li { @apply border-b border-white; a { diff --git a/resources/js/header.js b/resources/js/header.js index 49abf3a..11b91e6 100644 --- a/resources/js/header.js +++ b/resources/js/header.js @@ -1,29 +1,36 @@ export default function menuInit() { let main_navigation = document.querySelector('#primary-menu'); const header = document.querySelector('#primary-header'); - const primary_menu = header.querySelector('#primary-menu'); - const burgerMenuToggle = header.querySelector('#burger-menu-toggle'); - const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle'); + if (!header) return; - function closeSubmenus(e) { + const primary_menu = header.querySelector('#primary-menu'); + const mobileMenuToggle = header.querySelector('#mobile-menu-toggle'); + const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle'); + const menusWrapper = header.querySelector('.menus-wrapper'); + + function closeSubmenus() { submenuToggles.forEach((button) => { - button.setAttribute('aria-expanded', false); - button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open'); + button.setAttribute('aria-expanded', 'false'); + const sub = button.parentElement?.querySelector('.sub-menu'); + if (sub) sub.classList.remove('sub-menu-open'); }); } // #### Open/close burger nav - // burgerMenuToggle.addEventListener('click', function (e) { - // e.preventDefault(); - // header.classList.toggle('nav-open'); - // burgerMenuToggle.toggleAttribute('aria-expanded'); - // gsap.from(primary_menu, { - // opacity: 20, - // y: '-100vh', - // duration: 0.5, - // ease: Power4.easeOut, - // }); - // }); + mobileMenuToggle.addEventListener('click', function (e) { + e.preventDefault(); + const isOpen = header.classList.contains('nav-open'); + header.classList.toggle('nav-open'); + mobileMenuToggle.toggleAttribute('aria-expanded'); + if (!isOpen) { + gsap.from(menusWrapper, { + opacity: 20, + y: '-100vh', + duration: 0.5, + ease: Power4.easeOut, + }); + } + }); // // #### Close nav when reaching the end of the menu with tab // document.addEventListener( @@ -40,14 +47,14 @@ export default function menuInit() { // burgerMenuToggle.focus(); // } // }, - // true + // true, // ); submenuToggles.forEach((button) => { button.addEventListener('click', function (e) { let isExpanded = button.getAttribute('aria-expanded') === 'true'; - closeSubmenus(e); + closeSubmenus(); if (!isExpanded) { button.setAttribute('aria-expanded', true); button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open'); @@ -55,9 +62,15 @@ export default function menuInit() { }); }); + document.addEventListener('click', (e) => { + if (!header.contains(e.target)) { + closeSubmenus(); + } + }); + document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { - closeSubmenus(e); + closeSubmenus(); } }); } diff --git a/template-parts/header/mobile-menu-brand.php b/template-parts/header/mobile-menu-brand.php index 1b8c9bd..a8d48cf 100644 --- a/template-parts/header/mobile-menu-brand.php +++ b/template-parts/header/mobile-menu-brand.php @@ -1,7 +1,7 @@