@php
    $menu = (new \App\Helpers\GlobalApp())->menuUser();
@endphp
<div class="bg-black bg-opacity-40 fixed h-full left-0 top-0 w-full backdrop-filter backdrop-blur-sm hidden toggleMenuOption z-40"
    data-toggle="sideMenu" id="sideMenuBlur"></div>
<div class="font-dunkin-sans-book fixed right-2 sm:right-10 top-20 mt-2 w-4/6 sm:w-1/5 bg-cream-custom pb-6 hidden flex flex-col rounded-3xl overflow-y-auto overflow-x-hidden z-50"
    id="sideMenu">
    <div class="flex justify-center items-center pl-69/100 sm:pr-20 h-1 mb-4">
        <i class="fixed fa fa-caret-up text-5xl text-cream-custom 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 px-4 py-2 hover:bg-dark-cream-custom border-l-8 border-cream-custom hover:border-purple-custom"
                    data-toggle="{{ Str::slug($item['name']) }}">
                    <i class="fa fa-{{ $item['icon'] }} text-purple-custom"></i>
                    {{ $item['name'] }}
                </a>
                <div class="accordion-content hidden flex flex-col" id="{{ Str::slug($item['name']) }}">
                    @foreach ($item['submenu'] as $subitem)
                        @hasanyrole($subitem['roles'])
                            <a class="flex items-center mr-2 border-b-2 px-6 py-2 hover:bg-dark-cream-custom"
                                href="{{ url($subitem['url']) }}">
                                <div class="h-2 w-2 bg-coffee-custom rounded-full mr-2"></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>