Nav

{% set items = items %}
{% set style = style|default('default') %}
{% set classes = classes %}

{% set styles = {
    'footer': 'grid grid-cols-2',
    'service': 'flex ',
    'default': 'flex flex-col xl:flex-row'
} %}

{% if items %}
    <nav>
        <ul class="{{ style ? styles[style] : '' }}">
            {% for item in items %}
                <li 
                    {% if style == 'footer' %}
                        x-data="{ activeFooterAccordion: false }"
                        aria-controls="accordion-panel-{{ loop.index }}"
                        class="font-bold mb-4 text-sm lg:text-base"
                    {% elseif style == 'service' %}
                        class="relative text-xs mr-6 last:mr-0 shrink-0 after:content-['.'] after:block after:absolute after:-right-3 after:bottom-0 last:after:hidden lg:text-sm"
                    {% else %}
                        class="relative py-3 shrink-0 xl:py-0 xl:mr-10 last:mr-0"                    
                    {% endif %}
                >

                    <div class="flex flex-wrap items-center">
                        <a href="{{ item.link }}" title="{{ item.name }}" class="relative {{ classes }}">
                            <span>
                                {{ item.name }}
                            </span>

                            {% if item.notificationDot %}
                                <span class="absolute top-0 -right-3 bg-primary w-1 h-1"></span>
                            {% endif %}
                        </a>

                        {% if item.children %}
                            <button  
                                @click="activeFooterAccordion = ! activeFooterAccordion"
                                :aria-expanded="activeFooterAccordion"
                                id="accordion-header-{{ loop.index }}"
                                class="flex items-center ml-3"
                            >
                                {% render '@icon' with {
                                    name: "plus"
                                } %}
                            </button>
                        {% endif %}
                    </div>
                    
                    {% if item.children %}
                        <ul class="w-full" 
                        {% if style == 'footer' %}
                            x-cloak 
                            x-show="activeFooterAccordion" 
                            x-collapse
                            aria-labelledby="accordion-header-{{ loop.index }}"
                        {% endif %}>
                            {% for item in item.children %}
                                <li class="mt-4">
                                    <a href="{{ item.link }}" title="{{ item.name }}" class="font-normal {{ childClasses }}">{{ item.name }}</a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    </nav>
{% endif %}