Sub-menu: 1 Enfant

<li class="py-3 md:py-1 group"
    @mouseenter.debounce.100ms="handleMouseEnter('{{ item.label }}')"
    @mouseleave.debounce.100ms="handleMouseLeave()">
    {% if item.hasChildren %}
        <button
            @click="
                activeSubmenu = activeSubmenu === '{{ item.label }}' ? null : '{{ item.label }}';
                isSubmenuOpen = activeSubmenu !== null;
            "
            class="flex items-center gap-2 header-menu {% if item.isBold %}font-bold{% endif %}"
            :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === '{{ item.label }}'}"
        >
            {{ item.label }}
            <span class="transition-transform duration-300 md:rotate-90"
                  :class="{'md:!-rotate-90': activeSubmenu === '{{ item.label }}'}">
                {% render "@icons-heroicons--chevron-right-mini" with {
                    iconClass: "w-5 h-5 md:w-4 md:h-4 transition-transform",
                } %}
            </span>
        </button>

        <div x-show="activeSubmenu === '{{ item.label }}'"
             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">
                            {% render "@icons-heroicons--chevron-left-mini" with {
                                width: "24",
                                height: "24"
                            } %}
                        </span>
                        <h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">{{ item.label }}</h2>
                    </button>
                </div>

                <div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8"
                     x-data="{ sectionCount: {{ item.submenu.sections|length }} }"
                >
                    {% for section in item.submenu.sections %}
                        <div class="{% if loop.first %}lg:col-start-3{% endif %} col-span-4"
                             :class="{
                                'lg:col-span-3': sectionCount < 4,
                                'sm:col-span-6 lg:col-span-2': sectionCount >= 4
                             }"
                        >
                            {% if section.title is defined and section.title %}
                                <h3 class="text-body-lg font-bold min-h-[30px]">{{ section.title }}</h3>
                            {% endif %}
                            <ul class="relative">
                                {% if section.links %}
                                    <div>
                                        {% for link in section.links %}
                                            <li class="py-1">
                                                <a href="{{ link.url }}"
                                                   class="{% if link.simpleLink %}header-link{% else %}header-submenu{% endif %}">
                                                    {{ link.text }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </ul>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% else %}
        <a href="{{ item.url }}"
           class="flex items-center gap-2 header-menu {% if item.isBold %}font-bold{% endif %}">
            {{ item.label }}
        </a>
    {% endif %}
</li>