<div x-data="initHeader()"
@resize.window.debounce.100="resize()"
@scroll.window="scroll()"
data-header
class="h-[91px] md:h-[76px]"
>
<div x-ref="wrapper" class="relative z-[70] bg-white flex items-center py-4 right-0 left-0 top-0">
<button class="menu-bp:hidden p-5"
@click="openNav()">
<span class="block bg-text-light h-[3px] rounded-full w-5.5 mb-1.25"></span>
<span class="block bg-text-light h-[3px] rounded-full w-7 mb-1.25"></span>
<span class="block bg-text-light h-[3px] rounded-full w-5.5"></span>
</button>
<div class="logo flex-1 menu-bp:flex-auto -mt-1.25 menu-bp:ml-7.5">
<img src="<?= renderImageUrl('logo.svg', 'logo', 'link') ?>" alt="" class="w-auto h-[27px] menu-bp:h-[31px]" width="218" height="31">
</div>
<div class="nav-desktop hidden menu-bp:block">
<nav x-data="initNavDesktop()">
<ul class="flex items-center text-left pr-4.5">
<li data-key="0" class="relative">
<button @click="toggle(0)" class="px-4.5 font-semibold text-text-light flex items-center gap-2.5 hover:text-text transition duration-300">
<span>Acheter/Louer</span>
<?= icon('chevron-down', 'text-icon'); ?>
</button>
<div x-ref="content"
class="absolute hidden left-1/2 -translate-x-1/2 pt-2.5"
:class="{
'hidden': isOpen !== 0
}"
>
<div class="bg-white rounded-button overflow-hidden shadow-submenu w-max flex items-stretch">
<div class="flex gap-5 lg:gap-10 px-7.5 lg:px-10 pt-7.5 pb-8.5 lg:pb-14">
<div class="flex flex-col">
<div class="text-lg leading-5.5 font-semibold tracking-tightened mb-5">Acheter/Louer d'occasion</div>
<ul class="flex-1">
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">2 780 occasions</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">425 voitures neuves en stock</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">95 motos neuves en stock</a></li>
</ul>
<a href="#" class="link text-primary-accent hover:text-secondary font-semibold tracking-tightened mt-10">Voir tout</a>
</div>
<div class="flex flex-col">
<div class="text-lg leading-5.5 font-semibold tracking-tightened mb-5">Acheter/Louer neuf</div>
<ul class="flex-1">
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Audi</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Peugeot</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Renault</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Citroën</a></li>
</ul>
<a href="#" class="link text-primary-accent hover:text-secondary font-semibold tracking-tightened mt-10">Voir tout</a>
</div>
</div>
<div class="relative">
<a href="#">
<img <?= renderImageUrl('menu-acheter-louer-push-desktop.jpg', 'menu') ?> class="w-full" alt="">
<span class="absolute top-0 left-0 px-5 py-7.5">
<span class="block text-xl font-semibold text-black">Perdu ?</span>
<span class="block max-w-[155px] text-2xl text-black mt-2.5">Laissez-vous guider en 5 questions</span>
<span class="link inline-block text-primary-accent group-hover:text-secondary font-semibold tracking-tightened in mt-5">Je me lance</span>
</span>
</a>
</div>
</div>
</div>
</li>
<li data-key="1"><a class="px-4.5 font-semibold text-text-light hover:text-text transition duration-300" href="#"><span>Estimer</span></a></li>
<li data-key="2"><a class="px-4.5 font-semibold text-text-light hover:text-text transition duration-300" href="#"><span>Entretenir</span></a></li>
<li data-key="3" class="relative">
<button @click="toggle(3)" class="px-4.5 font-semibold text-text-light flex items-center gap-2.5 hover:text-text transition duration-300">
<span>Groupe</span>
<?= icon('chevron-down', 'text-icon'); ?>
</button>
<div x-ref="content"
class="absolute hidden left-1/2 -translate-x-1/2 pt-2.5"
:class="{
'hidden': isOpen !== 3
}"
>
<div class="bg-white rounded-button overflow-hidden shadow-submenu w-max flex items-stretch">
<div class="flex gap-5 lg:gap-10 px-7.5 lg:px-10 lg:pr-20 pt-7.5 pb-8.5 lg:pb-14">
<div class="flex flex-col">
<ul class="flex-1">
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Qui sommes-nous ?</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Nous rejoindre</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Nos services</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Nos financements</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Nous contacter</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#">Nos partenaires</a></li>
<li><a class="link text-text-light hover:text-primary-accent py-1.5 block" href="#"><img src="<?= renderImageUrl('logo-mag.svg','logo', 'link') ?>" alt=""></a></li>
</ul>
</div>
</div>
<div class="relative">
<a href="#">
<img <?= renderImageUrl('menu-mag-desktop.jpg', 'menu', 'blur') ?> class="w-full" alt="">
</a>
</div>
</div>
</div>
</li>
<li data-key="4"><a class="px-4.5 font-semibold text-text-light hover:text-text transition duration-300" href="#"><span>Nous trouver</span></a></li>
</ul>
</nav>
</div>
<div class="mr-4.25 md:mr-7.5">
<button class="btn btn-primary py-2.75 px-5">
<svg class="icon w-4 menu-bp:hidden" width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="9" cy="5.6839" rx="4" ry="4.5" stroke="currentColor" stroke-width="1.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 18.1839C17 21.6839 13 20.6839 9 20.6839C5 20.6839 1 21.6839 1 18.1839C1 16.1839 4.582 13.6839 9 13.6839C13.418 13.6839 17 16.1839 17 18.1839Z" stroke="currentColor" stroke-width="1.8"/>
</svg>
<span class="hidden menu-bp:inline">
Se connecter
</span>
</button>
</div>
</div>
</div>
<div x-data
class="nav-mobile fixed z-50 top-[91px] left-0 bottom-0 w-full bg-ui-light overflow-y-auto overflow-x-hidden transition duration-300 -translate-x-full"
id="navMobile"
:class="{
'translate-x-0' : Alpine.store('navOpen'),
'-translate-x-full' : !Alpine.store('navOpen')
}"
>
<nav>
<ul>
<li x-data="initSubNavMobile()">
<button class="link flex px-5 py-4 text-xl font-semibold border-b border-ui w-full justify-between items-center"
@click="open(); $dispatch('openSubNav')"
>
Acheter/Louer <?= icon('chevron-right', 'text-primary-accent group-hover:text-secondary w-2.5'); ?>
</button>
<div x-ref="content"
class="absolute top-0 left-0 bottom-0 z-1 overflow-auto w-full translate-x-full transition duration-300"
:class="{
'translate-x-full': !isOpen
}"
>
<div class="bg-white">
<div @click="close()" class="flex gap-5 items-center px-5 py-4 bg-ui text-lg font-semibold group"><?= icon('chevron-left', 'text-primary-accent group-hover:text-secondary w-3.25'); ?> Acheter/Louer</div>
<div class="">
<div class="flex flex-col">
<ul class="flex-1">
<li><a href="#" class="link flex px-5 py-4 text-xl font-semibold border-b border-ui w-full justify-between items-center">Acheter/Louer d'occasion</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">2 780 occasions</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">425 voitures neuves en stock</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">95 motos neuves en stock</a></li>
<li><a href="#" class="link flex px-5 py-4 text-lg border-b border-ui text-primary-accent hover:text-secondary font-semibold tracking-tightened">Tout voir</a></li>
</ul>
</div>
<div class="flex flex-col">
<ul class="flex-1">
<li><a href="#" class="link flex px-5 py-4 text-xl font-semibold border-b border-ui w-full justify-between items-center">Acheter/Louer neuf</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Audi</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Peugeot</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Renault</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Citroën</a></li>
<li><a href="#" class="link flex px-5 py-4 text-lg border-b border-ui text-primary-accent hover:text-secondary font-semibold tracking-tightened">Tout voir</a></li>
</ul>
</div>
</div>
<div class="relative">
<a href="#">
<img <?= renderImageUrl('menu-acheter-louer-push.jpg', 'menu', 'blur') ?> class="w-full" alt="">
<span class="absolute top-0 left-0 px-5 py-7.5">
<span class="block text-xl font-semibold text-black">Perdu ?</span>
<span class="block max-w-[155px] text-2xl text-black mt-2.5">Laissez-vous guider en 5 questions</span>
<span class="link inline-block text-primary-accent group-hover:text-secondary font-semibold tracking-tightened in mt-2.5">Je me lance</span>
</span>
</a>
</div>
</div>
</div>
</li>
<li><a class="link block px-5 py-4 text-xl font-semibold border-b border-ui w-full" href="#">Estimer</a></li>
<li><a class="link block px-5 py-4 text-xl font-semibold border-b border-ui w-full" href="#">Entretenir</a></li>
<li x-data="initSubNavMobile()">
<button class="link flex px-5 py-4 text-xl font-semibold border-b border-ui w-full justify-between items-center"
@click="open(); $dispatch('openSubNav')"
>
Groupe <?= icon('chevron-right', 'text-primary-accent group-hover:text-secondary w-2.5'); ?>
</button>
<div x-ref="content"
class="absolute top-0 left-0 bottom-0 z-1 overflow-auto w-full translate-x-full transition duration-300"
:class="{
'translate-x-full': !isOpen
}"
>
<div class="bg-white">
<div @click="close()" class="flex gap-5 items-center px-5 py-4 bg-ui text-lg font-semibold group"><?= icon('chevron-left', 'text-primary-accent group-hover:text-secondary w-3.25'); ?> Le groupe</div>
<div class="">
<div class="flex flex-col">
<ul class="flex-1">
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Qui sommes-nous ?</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Nous rejoindre</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Nos services</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Nos financements</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Nous contacter</a></li>
<li><a class="link flex px-5 py-4 text-lg border-b border-ui justify-between items-center" href="#">Nos partenaires</a></li>
<li><a class="link flex px-5 py-4 border-b border-ui" href="#"><img src="<?= renderImageUrl('logo-mag.svg', 'logo', 'link') ?>" alt=""></a></li>
</ul>
</div>
</div>
<div class="relative">
<a href="#">
<img <?= renderImageUrl('menu-mag.jpg', 'menu', 'blur') ?> class="w-full" alt="">
</a>
</div>
</div>
</div>
</li>
<li><a class="link block px-5 py-4 text-xl font-semibold border-b border-ui w-full" href="#">Nous trouver</a></li>
</ul>
<div class="relative">
<a href="#">
<img <?= renderImageUrl('menu-push.jpg', 'menu', 'blur') ?> class="w-full" alt="">
<span class="absolute top-0 left-0 px-5 py-7.5">
<span class="block text-xl font-semibold text-black">Un push ici</span>
<span class="block w-1/2 text-2xl text-black mt-2.5">Lorem ipsum dolor sic ametr</span>
<span class="link inline-block text-primary-accent group-hover:text-secondary font-semibold tracking-tightened in mt-5">Je me lance</span>
</span>
</a>
</div>
<a class="link flex gap-3.75 px-5 py-4 text-xl font-semibold border-b border-ui w-full" href="#"><?= icon('dashboard'); ?>Mon garage en ligne</a>
<a class="link flex gap-3.75 px-5 py-4 text-xl font-semibold border-b border-ui w-full" href="#"><?= icon('phone-fill'); ?>Contactez-nous</a>
</nav>
</div>
<div id="navigationOverlay" x-data @click="$dispatch('closeSubNav')" class="navigation__overlay hidden opacity-0 fixed inset-0 bg-primary transition duration-300 z-[60] cursor-pointer"></div>
<script>
function initHeader() {
return {
isMobile: window.outerWidth < 768,
isSticky: false,
init() {
Alpine.store('navOpen', false);
this.scroll();
},
resize() {
this.isMobile = window.outerWidth < 768;
},
openNav() {
if(Alpine.store('navOpen')) {
Alpine.store('navOpen', false);
document.body.classList.remove('overflow-hidden');
} else {
Alpine.store('navOpen', true);
document.body.classList.add('overflow-hidden');
}
},
scroll() {
if(window.scrollY > this.$root.getBoundingClientRect().height) {
this.$refs.wrapper.classList.add('fixed');
this.$refs.wrapper.classList.remove('relative');
this.$dispatch('start-sticky-header');
} else {
this.$refs.wrapper.classList.add('relative');
this.$refs.wrapper.classList.remove('fixed');
this.$dispatch('end-sticky-header');
}
}
}
}
function initNavDesktop() {
return {
isOpen: false,
init() {
const current = this;
document.addEventListener('closeSubNav', function () {
current.close();
})
},
toggle(idSubNav) {
if(this.isOpen !== false && this.isOpen === idSubNav) {
this.close(idSubNav);
} else {
this.open(idSubNav);
}
},
open(idSubNav) {
this.isOpen = idSubNav;
document.getElementById('navigationOverlay').classList.remove('hidden');
this.$nextTick(() => {
document.getElementById('navigationOverlay').classList.remove('opacity-0');
document.getElementById('navigationOverlay').classList.add('opacity-40');
})
},
close() {
this.isOpen = false;
document.getElementById('navigationOverlay').classList.add('opacity-0');
document.getElementById('navigationOverlay').classList.remove('opacity-40');
setTimeout(function () {
document.getElementById('navigationOverlay').classList.add('hidden');
}, 300);
}
}
}
function initSubNavMobile() {
return {
isOpen: false,
init() {
const current = this;
document.addEventListener('closeSubNav', function () {
current.close();
})
},
open() {
this.isOpen = true;
this.$nextTick(()=>{
document.getElementById('navMobile').classList.add('overflow-hidden');
document.getElementById('navMobile').classList.remove('overflow-y-auto');
})
},
close() {
this.isOpen = false;
this.$nextTick(()=> {
document.getElementById('navMobile').classList.remove('overflow-hidden');
document.getElementById('navMobile').classList.add('overflow-y-auto');
})
}
}
}
</script>