<div class="hiddenbar-body-ovelay"></div>

<!-- Mobile Nav  -->
@persist('mobile')
<div id="page" class="mobilie_header_nav stylehome1">
    <div class="mobile-menu">
        <div class="header bdrb1">
            <div class="menu_and_widgets">
                <div class="mobile_menu_bar d-flex justify-content-between align-items-center">
                    <a class="mobile_logo" wire:navigate href="{{ route('welcome') }}"><img
                            src="{{ asset('logo.svg') }}" alt="{{ env('APP_NAME') }}"> </a>
                    <div class="right-side text-end">
                        @if (!Session::get('token'))
                        <!-- <a class="ml-2" href="{{ route('login') }}">Login</a> -->
                        <a class="mr-4" href="{{ route('register') }}">Register</a>@else
                        <a wire:navigate href="{{ route('dashboard.user') }}">Account</a> @endif
                        <a class="menubar ml30" href="#menu"><img src=" {{ asset('images/mobile-dark-nav-icon.svg') }}"
                                alt="{{ env('APP_NAME') }}"> </a>
                    </div>
                </div>
            </div>
            <div class="posr">
                <div class="mobile_menu_close_btn"><span class="far fa-times"></span></div>
            </div>
        </div>
    </div>
    <!-- /.mobile-menu -->
    <nav id="menu" class="">
        <ul>
            <li><a href="{{ route('welcome') }}">Home</a> </li>
            @if (!Session::get('token'))
            <!-- <li><a wire:navigate href="{{ route('login') }}">Login</a></li> -->
            <li><a href="{{ route('register') }}">Become a Service Provider</a></li>
            @endif
            @livewire('web.mobile_nav')
            @if (Session::get('token') && Session::get('user')['role'] == 'seller')
            <li><a href="{{ route('dashboard') }}">My Account</a> </li>
            @elseif (Session::get('token') && Session::get('user')['role'] == 'buyer')
            <li><a href="{{ route('dashboard.user') }}">My Account</a> </li>
            <li><a href="{{ route('register') }}">Become a Service Provider</a></li>
            @endif
            <li><a wire:navigate href="{{ route('contact') }}">Contact Us</a></li>
            <li><a class="text-danger fw-bold" wire:navigate href="{{ route('logout') }}">Logout</a></li>
        </ul>
    </nav>
</div>
@endpersist