@props(['active','expand'])

@php
    $classes = ($active ?? false)
                ? 'inline-flex items-center px-1 pt-3 cursor-pointer  text-sm font-medium leading-5 text-gray-100 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
                : 'inline-flex items-center px-1 pt-3 cursor-pointer text-sm font-medium leading-5 text-gray-500 hover:text-gray-100 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
@endphp
<div x-data="{expand:JSON.parse(localStorage.getItem('expand'))}">
    <a {{ $attributes->merge(['class' => $classes]) }} @click="localStorage.setItem('expand',JSON.stringify(!expand));expand=!expand">
        {{ $trigger }}
    </a>
    <div class="ml-4" x-show="expand">
        {{$body}}
    </div>
</div>