{{--@php--}}
{{--    $isOpen = request()->routeIs($routeIndicator);--}}
{{--@endphp--}}

{{--<div x-data="{ open: '{{ request()->routeIs($routeIndicator) ? 'true' : 'false' }}' == 'true' }">--}}

{{--    <button @click="open = !open"--}}
{{--            :class="{'bg-gray-100': open, '': !open}"--}}
{{--            class="block rounded-lg px-4 py-2 text-sm font-medium hover:bg-gray-100 hover:text-gray-700 w-full text-left flex justify-between items-center">--}}

{{--        {{$title}}--}}

{{--        <svg xmlns="http://www.w3.org/2000/svg"--}}
{{--             class="h-5 w-5 transform transition-transform duration-200"--}}
{{--             viewBox="0 0 20 20"--}}
{{--             fill="currentColor">--}}
{{--            <path--}}
{{--                    fill-rule="evenodd"--}}
{{--                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"--}}
{{--                    clip-rule="evenodd"--}}
{{--            />--}}
{{--        </svg>--}}
{{--    </button>--}}

{{--    <ul class="mt-2 space-y-1 px-4"--}}
{{--        x-show="open"--}}
{{--        style="display: none;">--}}
{{--        @foreach($items as $item)--}}
{{--            @php--}}
{{--                $isActive = request()->routeIs($item['routeIndicator']);--}}
{{--                $classes = $isActive--}}
{{--                    ? 'block rounded-lg shadow-sm shadow-emerald-100 bg-emerald-400 px-4 py-2 text-sm font-medium text-white'--}}
{{--                    : 'block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700';--}}
{{--            @endphp--}}
{{--            <li>--}}
{{--                <a href="{{ route($item['route']) }}"--}}
{{--                   class="{{ $classes }}">--}}
{{--                    {{ $item['name'] }}--}}
{{--                </a>--}}
{{--            </li>--}}
{{--        @endforeach--}}
{{--    </ul>--}}
{{--</div>--}}

@props(['title', 'routeIndicator'])

@php
    $isOpen = request()->routeIs($routeIndicator);
@endphp

<div x-data="{ open: '{{ request()->routeIs($routeIndicator) ? 'true' : 'false' }}' == 'true' }">
    <button @click="open = !open"
            class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 w-full text-left flex justify-between items-center">
        <div class="flex items-center">
            {{$title}}
            <!-- Here add your SVG or whatever you use to indicate open/close state -->
        </div>
    </button>

    <ul class="mt-2 space-y-1 px-4"
        x-show="open"
        style="display: none;">
        {{ $slot }} {{-- this line will render child components --}}
    </ul>
</div>