<div x-data="{ open: false }">
    <button 
        x-on:click="open = ! open" 
        class="text-slate-900 block rounded-md py-2 text-base font-medium flex items-center"
        >
        {{ item.title }}
        <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
            {% include "templates/components/icons/angle-down.twig" %} 
        </div>
    </button>
    
    <div x-show="open" x-transition class="mb-6">
        {% for child in item.childs %}
        <a class="text-gray-900 block rounded-md pl-2 py-2 text-sm font-base divide-slate-500" href='{{ child.url }}'>{{ child.title }}</a>
        {% endfor %}
    </div>
</div>