Header Navigation

<nav x-data="{
        activeSubmenu: null,
        isSubmenuOpen: false,
        init() {
            this.$watch('$store.screen.isMobile', (value) => {
                if (!value) {
                    this.activeSubmenu = null;
                    this.isSubmenuOpen = false;
                }
            });
        },
        handleMouseEnter(label) {
            if (!this.$store.screen.isMobile) {
                this.activeSubmenu = label;
                this.isSubmenuOpen = true;
            }
        },
        handleMouseLeave() {
            if (!this.$store.screen.isMobile) {
                this.activeSubmenu = null;
                this.isSubmenuOpen = false;
            }
        }
    }" class="max-md:overflow-y-scroll order-2 transition-all duration-300 md:flex-1 px-3 pt-0.5 pb-4 max-md:py-6 max-md:px-4" :class="[
         isMobileMenuOpen ? 'flex-1' : 'md:block',
         isSticky ? 'md:pb-2.5 xl:py-[27px]' : 'xl:pb-6'
     ]" x-show="isMobileMenuOpen || !$store.screen.isMobile" x-transition:enter="transform transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transform transition ease-out duration-300" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2" id="mobile-menu" :aria-hidden="!isMobileMenuOpen" aria-label="Menu principal">
    <ul class="md:relative flex md:gap-8 flex-col md:flex-row md:items-center transition-all duration-300 justify-center" :class="{'md:justify-center': isSticky}">
        <li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('NOS PRODUITS')" @mouseleave.debounce.100ms="handleMouseLeave()">
            <button @click="
                activeSubmenu = activeSubmenu === 'NOS PRODUITS' ? null : 'NOS PRODUITS';
                isSubmenuOpen = activeSubmenu !== null;
            " class="flex items-center gap-2 header-menu font-bold" :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === 'NOS PRODUITS'}">
                NOS PRODUITS
                <span class="transition-transform duration-300 md:rotate-90" :class="{'md:!-rotate-90': activeSubmenu === 'NOS PRODUITS'}">
                    <svg class="w-5 h-5 md:w-4 md:h-4 transition-transform shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />

                    </svg> </span>
            </button>

            <div x-show="activeSubmenu === 'NOS PRODUITS'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" x-transition:enter-end="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave-end="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" class="bg-white absolute md:fixed inset-x-0 w-full h-full md:h-auto max-md:overflow-y-scroll origin-top block max-md:top-[57px] pb-[65px] md:pb-auto z-50 md:mt-3 md:border-t md:border-neutral-50" :class="isSticky ? 'md:mt-[14px] xl:mt-[31px]' : 'md:mt-5 xl:mt-7'" @click.away="if (!$store.screen.isMobile) { activeSubmenu = null; isSubmenuOpen = false; }">
                <div class="inline-flex md:block w-full flex-col justify-start items-start px-4 py-6 md:p-6 gap-6 md:py-8">
                    <div class="md:hidden w-full after:bg-neutral-975 after:h-0.5 after:w-full after:relative after:bottom-[5px] after:block">
                        <button @click="activeSubmenu = null" class="md:hidden inline-flex w-full items-center justify-start gap-3 py-3 cursor-pointer">
                            <span class="mr-2">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.22431C12.0732 5.5172 12.0732 5.99208 11.7803 6.28497L8.06066 10.0046L11.7803 13.7243C12.0732 14.0172 12.0732 14.4921 11.7803 14.785C11.4874 15.0779 11.0126 15.0779 10.7197 14.785L6.46967 10.535C6.17678 10.2421 6.17678 9.7672 6.46967 9.47431L10.7197 5.22431C11.0126 4.93142 11.4874 4.93142 11.7803 5.22431Z" fill="currentColor" />

                                </svg> </span>
                            <h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">NOS PRODUITS</h2>
                        </button>
                    </div>

                    <div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8" x-data="{ sectionCount: 4 }">
                        <div class="lg:col-start-3 col-span-4" :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }">
                            <h3 class="text-body-lg font-bold min-h-[30px]">Sélection</h3>
                            <ul class="relative">
                                <div>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Best Sellers
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Duo & Kits
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Nouveautés
                                        </a>
                                    </li>
                                </div>
                            </ul>
                        </div>
                        <div class=" col-span-4" :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }">
                            <h3 class="text-body-lg font-bold min-h-[30px]">Nos gammes</h3>
                            <ul class="relative">
                                <div>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Nettoyants
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Actifs
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Hydratants
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Corps
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Solaires
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-link">
                                            Voir plus
                                        </a>
                                    </li>
                                </div>
                            </ul>
                        </div>
                        <div class=" col-span-4" :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }">
                            <h3 class="text-body-lg font-bold min-h-[30px]">Actifs purs</h3>
                            <ul class="relative">
                                <div>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Acide Hyaluronique
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Vitamine C
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Retinol
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Acide Salicylique
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Niacinamide
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-link">
                                            Voir plus
                                        </a>
                                    </li>
                                </div>
                            </ul>
                        </div>
                        <div class=" col-span-4" :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }">
                            <h3 class="text-body-lg font-bold min-h-[30px]">Vos préoccupations</h3>
                            <ul class="relative">
                                <div>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Signes de l'âge
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Boutons & imperfections
                                        </a>
                                    </li>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('DIAGNOSTIQUE')" @mouseleave.debounce.100ms="handleMouseLeave()">
            <a href="#" class="flex items-center gap-2 header-menu font-bold">
                DIAGNOSTIQUE
            </a>
        </li>
        <li aria-hidden="true" class="hidden md:block w-5 rotate-90 border-t border-black"></li>
        <li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('NOS SERVICES')" @mouseleave.debounce.100ms="handleMouseLeave()">
            <button @click="
                activeSubmenu = activeSubmenu === 'NOS SERVICES' ? null : 'NOS SERVICES';
                isSubmenuOpen = activeSubmenu !== null;
            " class="flex items-center gap-2 header-menu " :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === 'NOS SERVICES'}">
                NOS SERVICES
                <span class="transition-transform duration-300 md:rotate-90" :class="{'md:!-rotate-90': activeSubmenu === 'NOS SERVICES'}">
                    <svg class="w-5 h-5 md:w-4 md:h-4 transition-transform shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />

                    </svg> </span>
            </button>

            <div x-show="activeSubmenu === 'NOS SERVICES'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" x-transition:enter-end="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave-end="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" class="bg-white absolute md:fixed inset-x-0 w-full h-full md:h-auto max-md:overflow-y-scroll origin-top block max-md:top-[57px] pb-[65px] md:pb-auto z-50 md:mt-3 md:border-t md:border-neutral-50" :class="isSticky ? 'md:mt-[14px] xl:mt-[31px]' : 'md:mt-5 xl:mt-7'" @click.away="if (!$store.screen.isMobile) { activeSubmenu = null; isSubmenuOpen = false; }">
                <div class="inline-flex md:block w-full flex-col justify-start items-start px-4 py-6 md:p-6 gap-6 md:py-8">
                    <div class="md:hidden w-full after:bg-neutral-975 after:h-0.5 after:w-full after:relative after:bottom-[5px] after:block">
                        <button @click="activeSubmenu = null" class="md:hidden inline-flex w-full items-center justify-start gap-3 py-3 cursor-pointer">
                            <span class="mr-2">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.22431C12.0732 5.5172 12.0732 5.99208 11.7803 6.28497L8.06066 10.0046L11.7803 13.7243C12.0732 14.0172 12.0732 14.4921 11.7803 14.785C11.4874 15.0779 11.0126 15.0779 10.7197 14.785L6.46967 10.535C6.17678 10.2421 6.17678 9.7672 6.46967 9.47431L10.7197 5.22431C11.0126 4.93142 11.4874 4.93142 11.7803 5.22431Z" fill="currentColor" />

                                </svg> </span>
                            <h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">NOS SERVICES</h2>
                        </button>
                    </div>

                    <div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8" x-data="{ sectionCount: 1 }">
                        <div class="lg:col-start-3 col-span-4" :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }">
                            <h3 class="text-body-lg font-bold min-h-[30px]">Nos services</h3>
                            <ul class="relative">
                                <div>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            SKINOBS : Analyser ma peau
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            SKINCOACH : Contacter un coach
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            ASKNAOS : Décrypter nos formules
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            POINTS DE VENTE : Où nous trouver ?
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            FAQ : Consulter les questions fréquentes
                                        </a>
                                    </li>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('SKINPEDIA')" @mouseleave.debounce.100ms="handleMouseLeave()">
            <a href="#" class="flex items-center gap-2 header-menu ">
                SKINPEDIA
            </a>
        </li>
        <li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('LA MARQUE')" @mouseleave.debounce.100ms="handleMouseLeave()">
            <button @click="
                activeSubmenu = activeSubmenu === 'LA MARQUE' ? null : 'LA MARQUE';
                isSubmenuOpen = activeSubmenu !== null;
            " class="flex items-center gap-2 header-menu " :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === 'LA MARQUE'}">
                LA MARQUE
                <span class="transition-transform duration-300 md:rotate-90" :class="{'md:!-rotate-90': activeSubmenu === 'LA MARQUE'}">
                    <svg class="w-5 h-5 md:w-4 md:h-4 transition-transform shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />

                    </svg> </span>
            </button>

            <div x-show="activeSubmenu === 'LA MARQUE'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" x-transition:enter-end="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave-end="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" class="bg-white absolute md:fixed inset-x-0 w-full h-full md:h-auto max-md:overflow-y-scroll origin-top block max-md:top-[57px] pb-[65px] md:pb-auto z-50 md:mt-3 md:border-t md:border-neutral-50" :class="isSticky ? 'md:mt-[14px] xl:mt-[31px]' : 'md:mt-5 xl:mt-7'" @click.away="if (!$store.screen.isMobile) { activeSubmenu = null; isSubmenuOpen = false; }">
                <div class="inline-flex md:block w-full flex-col justify-start items-start px-4 py-6 md:p-6 gap-6 md:py-8">
                    <div class="md:hidden w-full after:bg-neutral-975 after:h-0.5 after:w-full after:relative after:bottom-[5px] after:block">
                        <button @click="activeSubmenu = null" class="md:hidden inline-flex w-full items-center justify-start gap-3 py-3 cursor-pointer">
                            <span class="mr-2">
                                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.22431C12.0732 5.5172 12.0732 5.99208 11.7803 6.28497L8.06066 10.0046L11.7803 13.7243C12.0732 14.0172 12.0732 14.4921 11.7803 14.785C11.4874 15.0779 11.0126 15.0779 10.7197 14.785L6.46967 10.535C6.17678 10.2421 6.17678 9.7672 6.46967 9.47431L10.7197 5.22431C11.0126 4.93142 11.4874 4.93142 11.7803 5.22431Z" fill="currentColor" />

                                </svg> </span>
                            <h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">LA MARQUE</h2>
                        </button>
                    </div>

                    <div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8" x-data="{ sectionCount: 1 }">
                        <div class="lg:col-start-3 col-span-4" :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }">
                            <ul class="relative">
                                <div>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Découvrez Etat Pur
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Etat Pur, une marque Naos
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            L’écobiologie, qu’est-ce que c’est ?
                                        </a>
                                    </li>
                                    <li class="py-1">
                                        <a href="#" class="header-submenu">
                                            Notre Science de l’âge
                                        </a>
                                    </li>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

    <div class="md:hidden border-t border-neutral-975 py-6 mt-6">
        <ul class="flex flex-col">
            <li class="py-2">
                <a href="#" class="flex items-center gap-2 group" aria-label="Nos points de vente">
                    <span aria-hidden="true">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />

                        </svg> </span>
                    <span class="header-submenu-group md:hidden lg:block">
                        Nos points de vente
                    </span>
                </a>
            </li>
            <li class="py-2">
                <a href="#" class="flex items-center gap-2 group">
                    <span aria-hidden="true">
                        <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                        </svg> </span>
                    <span class="header-submenu-group">Mon compte</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="absolute bottom-0 right-0 left-0 md:hidden h-32 w-screen bg-gradient-to-b from-transparent to-white z-40 pointer-events-none"></div>
</nav>