
<div class="relative" x-data="{ open: false }">
    <button @click="open = !open" @click.away="open = false" class="px-2 py-2 rounded font-semibold text-md  flex items-center">
        {{item.title}}
        <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
            </svg> 
        </div>
    </button>
    <div x-show="open" class="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-10" x-transition style="display: none;">
        {% for child in item.childs %}
        <a href="{{ child.url }}" class="block px-4 py-2 text-slate-800 text-sm hover:bg-slate-50 rounded-lg {% if loop.last %} font-semibold {% endif %}">{{ child.title }}</a>
        {% endfor %}
    </div>
</div>
    
    
    
   