@php
    $globa_app = new \App\Helpers\GlobalApp();
    $menu = $globa_app->menuUser();
@endphp

<div class="bg-opacity-40 backdrop-filter backdrop-blur-sm toggleMenuOption fixed top-0 left-0 z-40 hidden w-full h-full bg-black"
    data-toggle="sideMenu" id="sideMenuBlur"></div>
<div class="font-dunkin-sans-book right-2 sm:right-10 top-20 sm:w-1/5 bg-cream-custom rounded-3xl fixed z-50 flex flex-col hidden w-4/6 pb-6 mt-2 overflow-x-hidden overflow-y-auto"
    id="sideMenu">
    <div class="pl-69/100 sm:pr-20 flex items-center justify-center h-1 mb-4">
        <i class="fa fa-caret-up text-cream-custom sm:-translate-x-20 fixed text-5xl transform -translate-y-1"></i>
    </div>
    @foreach ($menu as $item)
        @hasanyrole($item['roles'])
            @if (array_key_exists('submenu', $item))
                <a href="#"
                    class="font-dunkin-sans-display toggleMenuOption text-coffee-custom hover:bg-dark-cream-custom border-cream-custom hover:border-purple-custom px-4 py-2 border-l-8"
                    data-toggle="{{ Str::slug($item['name']) }}">
                    <i class="fa fa-{{ $item['icon'] }} text-purple-custom"></i>
                    {{ $item['name'] }}
                </a>
                <div class="accordion-content flex flex-col hidden" id="{{ Str::slug($item['name']) }}">
                    @foreach ($item['submenu'] as $subitem)
                        @hasanyrole($subitem['roles'])
                            <a class="hover:bg-dark-cream-custom flex items-center px-6 py-2 mr-2 border-b-2"
                                href="{{ url($subitem['url']) }}">
                                <div class="bg-coffee-custom w-2 h-2 mr-2 rounded-full"></div>
                                {{-- <i class="fa fa-{{ $subitem['icon'] }} fa-2xs"></i> --}}
                                {{ $subitem['name'] }}
                            </a>
                        @endhasanyrole
                    @endforeach
                </div>
            @else
                <a class="font-dunkin-sans-display text-coffee-custom px-4 py-2 hover:bg-dark-cream-custom border-l-8 border-cream-custom hover:border-purple-custom {{ isset($item['responsive']) ? 'sm:hidden' : '' }}"
                    href="{{ url($item['url']) }}">
                    <i class="fa fa-caret-right text-purple-custom"></i> &nbsp; {{ $item['name'] }}
                </a>
            @endif
        @endhasanyrole
    @endforeach
    <div class="sm:hidden flex justify-center mt-2">
        <form action="{{ route('logout') }}" method="POST">
            {{ csrf_field() }}
            <button type="submit" class="btn-purple-custom">Salir</button>
        </form>
    </div>
</div>