@php
    $name = strtolower(str_replace(' ', '_', $name))
@endphp
<div x-data="{ {{$name ?? 'dropdownName'}}: false }" class="relative inline-block" @click.away="{{$name ?? 'dropdownName'}} = false">
    @if (!empty($dropdownDatas))
        <button x-cloak @click="{{$name ?? 'dropdownName'}} = !{{$name ?? 'dropdownName'}}" class="nav-menu-item flex items-center" >
            {{$dropdownDatas['title']}}
            <svg 
                class="ml-1 transition-all duration-100" :class="{{$name ?? 'dropdownName'}} === true ? 'rotate-180' : ''" width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.703125 1.3418L5.33154 5.97021L9.95996 1.3418" stroke="#f7fb06" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
        <div x-show="{{$name ?? 'dropdownName'}}" 
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="opacity-0 scale-90"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-100"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-90" 
            class="dropdown-item-wrapper" style="display: none;"
        >
            @foreach ($dropdownDatas['submenu'] as $item)
                <a href="{{$item['url']}}" class="dropdown-item">{{$item['title']}}</a>
            @endforeach
        </div>
    @else
        <div>
            !Empty Menu Datas!
        </div>
    @endif
    
</div>