@php
    $menusPath = view('docs.menu-data')->getPath();
    $menus = include($menusPath);
@endphp

<nav class="space-y-2 text-sm">
    @foreach ($menus as $menu)
        @if (empty($menu['collapsible']))
            <a href="{{ $menu['url'] }}"
                class="block px-3 py-2 rounded hover:bg-blue-100 {{ $menu['active'] ?? false ? 'bg-blue-200 font-semibold' : '' }}">
                {{ $menu['icon'] }} {{ $menu['title'] }}
            </a>
        @else
            <div x-data="{ open: {{ $menu['open'] ?? false ? 'true' : 'false' }} }" class="space-y-1">
                <button @click="open = !open"
                    class="w-full text-left flex items-center justify-between px-3 py-2 rounded hover:bg-blue-100 font-semibold">
                    <span>{{ $menu['icon'] }} {{ $menu['title'] }}</span>
                    <svg class="w-4 h-4 transform transition-transform duration-300 ease-in-out"
                        :class="{ 'rotate-180': open }"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 9l-7 7-7-7" />
                    </svg>
                </button>

                <div x-show="open" x-cloak x-transition class="ml-5 border-l border-gray-300 pl-3 space-y-1">
                    @foreach ($menu['children'] as $child)
                        <a href="{{ $child['url'] }}"
                            class="block px-3 py-2 rounded hover:bg-blue-100 {{ $child['active'] ?? false ? 'bg-blue-200 font-semibold' : '' }}">
                            {{ $child['icon'] }} {{ $child['title'] }}
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    @endforeach
</nav>