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

First header refactor

Browse Source
This commit is contained in:
Antoine M 2026-05-11 16:52:38 +02:00
parent ec0ed00c9e
commit dabedfa4af
7 changed files with 108 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
header.php
View File

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

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

@ -6,7 +6,15 @@
} }
#mobile-menu-toggle { #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 { &__inner-elements {
@apply flex justify-between items-center px-6 gap-12; @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;
}
}
}

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

@ -24,7 +24,8 @@
} }
body:has(header[nav-open='true']) { 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 { header {
/* @apply min-h-screen; */ /* @apply min-h-screen; */
} }

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

@ -61,7 +61,7 @@
li.menu-item { li.menu-item {
@apply font-medium @apply font-medium
text-lg text-lg
text-center; lg:text-center;
&:hover > button, &:hover > button,
&:hover > a, &:hover > a,
@ -141,12 +141,12 @@
@apply bg-carhop-green-700 @apply bg-carhop-green-700
p-6 p-6
px-6 px-6
mx-auto mx-auto
lg:mx-0 lg:mx-0
static static
w-full w-full
grid-cols-2 lg:grid-cols-2
grid-cols-1
lg:absolute; lg:absolute;
z-index: 999; z-index: 999;
display: none; display: none;
@ -183,9 +183,11 @@
@apply max-w-3xl w-full lg:text-left; @apply max-w-3xl w-full lg:text-left;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
&:nth-last-child(-n + 2), @screen lg {
&:last-child { &:nth-last-child(-n + 2),
border-bottom: none; &:last-child {
border-bottom: none;
}
} }
&:nth-child(odd) { &:nth-child(odd) {
@ -258,14 +260,14 @@
width: fit-content; width: fit-content;
> ul { > ul {
@apply max-w-xs @apply lg:max-w-xs
mx-auto; mx-auto;
/* min-height: 96vh; */ /* min-height: 96vh; */
padding-top: 5vh; padding-top: 2vh;
} }
li.menu-item { li.menu-item {
@apply mt-0 @apply mt-0
text-center lg:text-center
text-white text-white
font-medium font-medium
py-8 py-8
@ -273,6 +275,10 @@
pb-2 pb-2
lg:pb-0; lg:pb-0;
&:first-child {
@apply pt-0 lg:pt-6;
}
.sub-menu li { .sub-menu li {
@apply text-sm; @apply text-sm;
} }
@ -282,8 +288,8 @@
/* BURGER MENU */ /* BURGER MENU */
body:has(.nav-open) { body:has(.nav-open) {
@apply max-h-screen @apply max-h-screen;
overflow-hidden; /* overflow-hidden; */
/* #content, /* #content,
footer, footer,
@ -355,9 +361,11 @@ li#menu-item-1836 {
@apply border border-white relative; @apply border border-white relative;
width: 100%; width: 100%;
grid-column: 1 / span 2; @screen lg {
margin: 0 auto; grid-column: 1 / span 2;
max-width: 98rem !important; margin: 0 auto;
max-width: 98rem !important;
}
&:after { &:after {
transition: all 0.3s ease-out; 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; @apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
> ul { > 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 { a {
@apply font-normal text-lg; @apply font-normal text-lg;
@ -63,9 +63,10 @@
} }
} }
.sub-menu { .sub-menu {
@apply flex flex-col border border-white bg-primary absolute top-10 left-0 z-30; @apply flex flex-col lg:border border-white bg-primary lg:absolute top-10 left-0 z-30;
width: 330px; @screen lg {
width: 330px;
}
li { li {
@apply border-b border-white; @apply border-b border-white;
a { a {

53
resources/js/header.js
View File

@ -1,29 +1,36 @@
export default function menuInit() { export default function menuInit() {
let main_navigation = document.querySelector('#primary-menu'); let main_navigation = document.querySelector('#primary-menu');
const header = document.querySelector('#primary-header'); const header = document.querySelector('#primary-header');
const primary_menu = header.querySelector('#primary-menu'); if (!header) return;
const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
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) => { submenuToggles.forEach((button) => {
button.setAttribute('aria-expanded', false); button.setAttribute('aria-expanded', 'false');
button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open'); const sub = button.parentElement?.querySelector('.sub-menu');
if (sub) sub.classList.remove('sub-menu-open');
}); });
} }
// #### Open/close burger nav // #### Open/close burger nav
// burgerMenuToggle.addEventListener('click', function (e) { mobileMenuToggle.addEventListener('click', function (e) {
// e.preventDefault(); e.preventDefault();
// header.classList.toggle('nav-open'); const isOpen = header.classList.contains('nav-open');
// burgerMenuToggle.toggleAttribute('aria-expanded'); header.classList.toggle('nav-open');
// gsap.from(primary_menu, { mobileMenuToggle.toggleAttribute('aria-expanded');
// opacity: 20, if (!isOpen) {
// y: '-100vh', gsap.from(menusWrapper, {
// duration: 0.5, opacity: 20,
// ease: Power4.easeOut, y: '-100vh',
// }); duration: 0.5,
// }); ease: Power4.easeOut,
});
}
});
// // #### Close nav when reaching the end of the menu with tab // // #### Close nav when reaching the end of the menu with tab
// document.addEventListener( // document.addEventListener(
@ -40,14 +47,14 @@ export default function menuInit() {
// burgerMenuToggle.focus(); // burgerMenuToggle.focus();
// } // }
// }, // },
// true // true,
// ); // );
submenuToggles.forEach((button) => { submenuToggles.forEach((button) => {
button.addEventListener('click', function (e) { button.addEventListener('click', function (e) {
let isExpanded = button.getAttribute('aria-expanded') === 'true'; let isExpanded = button.getAttribute('aria-expanded') === 'true';
closeSubmenus(e); closeSubmenus();
if (!isExpanded) { if (!isExpanded) {
button.setAttribute('aria-expanded', true); button.setAttribute('aria-expanded', true);
button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open'); 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) { document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') { if (e.key === 'Escape') {
closeSubmenus(e); closeSubmenus();
} }
}); });
} }

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

@ -1,7 +1,7 @@
<?php <?php
?> ?>
<div class="carhop-mobile-menu-brand menu-mobile-brand" id="menu-mobile-brand"> <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> <span class="text-content">Menu</span>
</button> </button>
<div class="menu-mobile-brand__inner-elements"> <div class="menu-mobile-brand__inner-elements">