@php use App\Helpers\TranslationHelper; @endphp
@aware(['items', 'isMarcas'])
<div class="fixed bg-white h-full left-0 px-4 top-0 bottom-0 right-0 w-full z-10 flex flex-col" {{ $attributes }}>
    <div class="text-right pb-2">
        <button class="align-top mt-7 p-0" title="Botão de fechar o menu." @click="mobileOpen = false">
            <svg class="text-deepblue" xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
                <path fill="currentColor"
                    d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z" />
            </svg>
        </button>
    </div>
    <div class="px-5">
        <a href="#" @click.prevent="open = false">
            <img class="inline-block mr-2 rotate-180" src="{{ asset('images/seta-direita-azul.svg') }}" />
            <span class="text-deepblue text-lg font-semibold align-middle">
                {{ __('messages.voltar_menu') }}
            </span>
        </a>
    </div>
    <div class="border-b border-b-midnightblue-100/50 border-solid my-4">{{-- linha separadora --}}</div>
    <div class="flex-1 overflow-auto font-montserrat font-semibold text-deepblue leading-10">
        @foreach ($items as $arr)
            {{-- [$href, $label, $target] --}}
            <div class="px-5 {{ $loop->first ? '' : 'mt-2' }}">
                <a class="text-lg" target="{{ empty($arr[2]) ? '_self' : '_blank' }}"
                    href="{{ $arr[0] }}">{{ $arr[1] }}</a>
            </div>
        @endforeach
    </div>
    <div class="border-b border-b-midnightblue-100/50 border-solid mt-4">{{-- linha separadora --}}</div>
    <div class="flex gap-x-8 items-center justify-center p-4">
        @if (!empty(app(\App\Settings\ConfiguracaoGeral::class)->rede_social_facebook))
            <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_facebook }}" target="_blank">
                <img class="align-middle" alt="Rede social facebook."
                    src="{{ asset('images/icon-facebook-desktop.svg') }}">
            </a>
        @endif
        @if (!empty(app(\App\Settings\ConfiguracaoGeral::class)->rede_social_youtube))
            <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_youtube }}" target="_blank">
                <img class="align-middle" alt="Canal do Youtube."
                    src="{{ asset('images/icon-youtube-desktop.svg') }}" />
            </a>
        @endif
        @if (!empty(app(\App\Settings\ConfiguracaoGeral::class)->rede_social_instagram))
            <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_instagram }}" target="_blank">
                <img class="align-middle" alt="Rede social Instagram."
                    src="{{ asset('images/icon-instagram-desktop.svg') }}">
            </a>
        @endif
        @if (!empty(app(\App\Settings\ConfiguracaoGeral::class)->rede_social_linkedin))
            <a href="{{ app(\App\Settings\ConfiguracaoGeral::class)->rede_social_linkedin }}" target="_blank">
                <img class="align-middle" alt="Rede social Linkedin."
                    src="{{ asset('images/icon-linkedin-desktop.svg') }}">
            </a>
        @endif
    </div>
    <div style="height: env(safe-area-inset-bottom); width: 1px"></div>
</div>