@props([
    'logo' => null,
    'logoIcon' => null,
    'dashboardRoute' => 'dashboard',
])

<div
    :class="sidebarToggle ? 'justify-center' : 'justify-between'"
    class="sidebar-header flex items-center gap-2 pb-7 pt-8"
>
    <a href="{{ route($dashboardRoute) }}">
        <span class="logo" :class="sidebarToggle ? 'hidden' : ''">
            @if($logo)
                {{ $logo }}
            @else
                <x-application-logo class="block h-9 w-auto fill-current text-gray-800"/>
            @endif
        </span>

        @if($logoIcon)
            {{ $logoIcon }}
        @else
            @if(config('app.logo') == 'momo')
                <img
                    class="logo-icon"
                    :class="sidebarToggle ? 'lg:block' : 'hidden'"
                    src="{{ asset('favicon.ico') }}"
                    alt="Logo"
                />
            @elseif(config('app.logo') == 'olala')
                <img
                    class="logo-icon"
                    :class="sidebarToggle ? 'lg:block' : 'hidden'"
                    src="{{ asset('favicon_olala.ico') }}"
                    alt="Logo"
                />
            @endif
        @endif
    </a>
</div>