{% comment %}
Mobile navigation showing direct children of the site root with staggered animations
{% endcomment %}

{% load wagtailcore_tags %}

{% for menuitem in menuitems %}
    <li class="mobile-menu-item font-light tracking-wider text-xl relative group {% if menuitem.active %} bg-accent{% endif %}"
        x-data="{}"
        x-show="isOpen"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-300"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-4"
        style="transition-delay: {{ forloop.counter0|add:0 }}00ms;">
        <a href="{% pageurl menuitem %}" 
           class="block px-3 py-2 text-sm font-medium text-accent-content hover:bg-accent"
           :class="$root.transitionClass"
           @click="isOpen = false">
            {{ menuitem.title }}
        </a>
    </li>
{% endfor %}