<div class="product__header md:h-[90px]"
x-data="initHeaderProduct()"
@scroll.window="scroll()"
@resize.window="isMobile = window.outerWidth < 768"
data-product-header
>
<div x-ref="desktopwrapper"
class="bg-primary text-white min-h-[88px] z-40"
:class="{
'fixed right-0 left-0': isSticky,
'relative': !isSticky
}"
>
<div x-ref="mobilewrapper"
class="px-5 md:px-7.5 flex gap-2.5 justify-between items-center z-40"
:class="{
'fixed right-0 left-0': isStickyMobile,
'relative': !isStickyMobile
}"
>
<div class="flex gap-2 py-5 md:py-8.5">
<div>
<a href="#" class="link flex justify-center items-center md:gap-2.75 w-12 md:w-auto h-12 md:h-auto bg-white md:bg-transparent rounded-full">
<?= icon('chevron-left', 'w-auto h-3.5 text-primary-accent md:text-white'); ?>
<span class="hidden md:block font-semibold text-smaller">Retour aux résultats</span>
</a>
</div>
<div class="hidden md:block"><?php include renderTemplate('molecule/breadcrumb', 'blue-bkg'); ?></div>
</div>
<?php include renderTemplate('template/hector/hector-static'); ?>
</div>
</div>
</div>
<script>
function initHeaderProduct() {
return {
isSticky: false,
isStickyMobile: false,
isMobile: window.outerWidth < 768,
headerHeight: 0,
init() {
if(document.querySelector('[data-header]')) {
this.headerHeight = document.querySelector('[data-header]').offsetHeight;
}
this.scroll();
const current = this;
document.addEventListener('start-sticky-header', function () {
if(!current.isMobile) {
current.isSticky = true;
current.$refs.desktopwrapper.style.top = this.headerHeight + "px";
}
})
document.addEventListener('end-sticky-header', function () {
if(!current.isMobile) {
current.isSticky = false;
current.$refs.desktopwrapper.style.removeProperty('top');
}
})
},
scroll() {
if(this.isMobile) {
this.isSticky = false;
if(this.$root.getBoundingClientRect().top <= this.headerHeight) {
this.isStickyMobile = true;
this.$refs.mobilewrapper.style.top = (this.headerHeight) + "px";
} else {
this.isStickyMobile = false;
this.$refs.mobilewrapper.style.removeProperty('top');
}
} else {
this.isStickyMobile = false;
}
}
}
}
</script>