<nav x-data="{ mobile: false }" class="relative mx-auto md:pb-6 max-w-7xl md:flex md:justify-between md:items-center">
    <div class="relative z-20 flex items-center justify-between">
        <div class="">
            <a class="text-xl font-bold text-gray-800 md:text-2xl hover:text-gray-700  " href="/">
                <img style="max-height: 60px" src="/logos/Sidev.png" alt="">
            </a>
        </div>
    </div>
    @guest
        <div class="bg-black py-2 px-5 text-center rounded" data-rounded="" data-primary="gray-900">
            <a class="flex-shrink-0 font-semibold text-white hover:underline"
                href="{{ route('login') }}">{{ __('wpbox.login') }}</a>

        </div>
    @endguest
    @auth
        <div :class="{ 'flex': mobile, 'hidden md:flex': !mobile }"
            class="relative z-20 flex-col justify-center pr-5 mt-4 space-y-8 md:pr-3 lg:pr-0 md:flex-row md:space-y-0 md:items-center md:space-x-6 md:mt-0 hidden md:flex">

            <a href="{{ route('home') }}"
                class="flex-shrink-0 w-auto text-base font-semibold leading-5 text-left text-gray-800 capitalize bg-transparent md:text-sm md:py-3 md:px-8 md:font-medium md:text-center md:text-white md:bg-gray-900 md:mx-0"
                data-rounded="" data-primary="gray-900">
                {{ __('wpbox.dashboard') }}
            </a>
        </div>
    @endauth
</nav>
