Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Antoine:ec0ed00c9e8fba0da94376fa1732b797dc7f0c9d
Branches Tags
Antoine:main
...
compare: Antoine:e29da0a1515884343d5a746be7941eee3059cb4a
Branches Tags
Antoine:main

2 Commits
ec0ed00c9e ... e29da0a151

Author SHA1 Message Date
Antoine M
e29da0a151 FEATURE Refactor header nav behaviours
All checks were successful
continuous-integration/drone/push Build is passing
Details
2026-05-11 17:03:01 +02:00
Antoine M
dabedfa4af First header refactor 2026-05-11 16:52:38 +02:00
7 changed files with 206 additions and 75 deletions
Show Stats Expand all files Collapse all files

7
header.php
View File

@ -22,9 +22,10 @@
<header id="primary-header">
<?php get_template_part('template-parts/header/mobile-menu-brand'); ?>
<?php get_template_part('template-parts/header/secondary-menu'); ?>
<?php get_template_part('template-parts/header/primary-menu'); ?>
<div class="menus-wrapper">
<?php get_template_part('template-parts/header/secondary-menu'); ?>
<?php get_template_part('template-parts/header/primary-menu'); ?>
</div>
<?php get_template_part('template-parts/search-module'); ?>

44
resources/css/layout/menu-mobile-brand.css
View File

@ -6,7 +6,17 @@
}
#mobile-menu-toggle {
@apply underline underline-offset-4;
@apply underline underline-offset-4 flex gap-2 items-center;
&[aria-expanded] {
&::after {
@apply block w-4 h-4;
content: '';
background-image: url('../resources/img/close_menu_icon.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
}
&__inner-elements {
@apply flex justify-between items-center px-6 gap-12;
@ -25,3 +35,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;
}
}
}

3
resources/css/layout/nav/header.css
View File

@ -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; */
}

36
resources/css/layout/nav/primary-menu.css
View File

@ -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;

9
resources/css/layout/nav/secondary-menu.css
View File

@ -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 {

180
resources/js/header.js
View File

@ -1,63 +1,141 @@
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');
/**
* Menu mobile + sous-menus du header (équivalent logique de header.ts côté dynamiques).
*/
class HeaderMenu {
constructor() {
this.header = document.querySelector('#primary-header');
this.primaryMenu = this.header?.querySelector('#primary-menu') ?? null;
this.mobileMenuToggle = this.header?.querySelector('#mobile-menu-toggle') ?? null;
this.menusWrapper = this.header?.querySelector('.menus-wrapper') ?? null;
this.submenuToggles = this.header
? this.header.querySelectorAll('.menu-item__submenu-toggle')
: [];
function closeSubmenus(e) {
submenuToggles.forEach((button) => {
button.setAttribute('aria-expanded', false);
button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open');
this.init();
}
/**
* Vérifie les éléments nécessaires et attache les écouteurs.
*/
init() {
if (!this.header || !this.mobileMenuToggle) {
console.warn('HeaderMenu : #primary-header ou #mobile-menu-toggle introuvable');
return;
}
this.bindEvents();
}
/**
* Lie tous les événements (toggle, focus, sous-menus, document).
*/
bindEvents() {
this.mobileMenuToggle.addEventListener('click', (e) => this.handleToggleClick(e));
document.addEventListener('focusin', (e) => this.handleFocusOut(e), true);
this.submenuToggles.forEach((button) => {
button.addEventListener('click', (e) => this.handleSubmenuToggle(e, button));
});
document.addEventListener('click', (e) => this.handleDocumentClick(e));
document.addEventListener('keydown', (e) => this.handleDocumentKeydown(e));
}
isMenuOpen() {
return this.header?.classList.contains('nav-open') ?? false;
}
openMenu() {
if (!this.header || !this.mobileMenuToggle || this.isMenuOpen()) return;
this.header.classList.add('nav-open');
this.mobileMenuToggle.setAttribute('aria-expanded', 'true');
this.mobileMenuToggle.textContent = 'Fermer';
if (typeof gsap !== 'undefined' && this.menusWrapper) {
gsap.from(this.menusWrapper, {
opacity: 20,
y: '-100vh',
duration: 0.5,
ease: Power4.easeOut,
});
}
}
closeMenu() {
if (!this.header || !this.mobileMenuToggle || !this.isMenuOpen()) return;
this.header.classList.remove('nav-open');
this.mobileMenuToggle.removeAttribute('aria-expanded');
this.mobileMenuToggle.textContent = 'Menu';
}
toggleMenu() {
if (this.isMenuOpen()) {
this.closeMenu();
} else {
this.openMenu();
}
}
closeAllSubmenus() {
this.submenuToggles.forEach((button) => {
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,
// });
// });
handleToggleClick(e) {
e.preventDefault();
this.toggleMenu();
}
// // #### Close nav when reaching the end of the menu with tab
// document.addEventListener(
// 'focusin',
// (e) => {
// const header = document.querySelector('#primary-header');
// if (
// header.classList.contains('nav-open') &&
// !header.contains(document.activeElement)
// ) {
// header.classList.remove('nav-open');
// burgerMenuToggle.setAttribute('aria-expanded', false);
/**
* Tab / focus hors du header : ferme la nav et renvoie le focus sur le bouton.
*/
handleFocusOut(e) {
if (!this.header || !this.mobileMenuToggle || !this.isMenuOpen()) return;
// burgerMenuToggle.focus();
// }
// },
// true
// );
const target = e.target;
if (!(target instanceof Node)) return;
if (this.header.contains(target)) return;
submenuToggles.forEach((button) => {
button.addEventListener('click', function (e) {
let isExpanded = button.getAttribute('aria-expanded') === 'true';
this.closeMenu();
this.closeAllSubmenus();
this.mobileMenuToggle.focus();
}
closeSubmenus(e);
if (!isExpanded) {
button.setAttribute('aria-expanded', true);
button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
}
});
});
/**
* Clic en dehors du header : ferme uniquement les sous-menus (comportement actuel).
*/
handleDocumentClick(e) {
const target = e.target;
if (!(target instanceof Node) || !this.header) return;
if (this.header.contains(target)) return;
this.closeAllSubmenus();
}
document.addEventListener('keydown', function (e) {
handleDocumentKeydown(e) {
if (e.key === 'Escape') {
closeSubmenus(e);
this.closeAllSubmenus();
}
});
}
/**
* Accordéon : un seul sous-menu ouvert à la fois.
*/
handleSubmenuToggle(e, button) {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
this.closeAllSubmenus();
if (!isExpanded) {
button.setAttribute('aria-expanded', 'true');
button.parentElement?.querySelector('.sub-menu')?.classList.add('sub-menu-open');
}
}
}
export default function menuInit() {
return new HeaderMenu();
}

2
template-parts/header/mobile-menu-brand.php
View File

@ -1,7 +1,7 @@
<?php
?>
<div class="carhop-mobile-menu-brand menu-mobile-brand" id="menu-mobile-brand">
<button id="mobile-menu-toggle" class="menu-mobile-brand__mobile-menu-toggle cta cta--outline cta--button" data-text-open="Menu" data-text-close="Fermer" aria-expanded="true">
<button id="mobile-menu-toggle" class="menu-mobile-brand__mobile-menu-toggle cta cta--outline cta--button" data-text-open="Menu" data-text-close="Fermer">
<span class="text-content">Menu</span>
</button>
<div class="menu-mobile-brand__inner-elements">