First header refactor
This commit is contained in:
Antoine M
parent
ec0ed00c9e
commit
dabedfa4af
|
|
@ -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'); ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user