<nav class="hidden md:block sticky-nav sticky top-0 z-40 bg-black border-b  border-border-primary">
    <div class="max-w-8xl mx-auto py-0 px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-12">
            <div class="flex items-center space-x-16">
                <a href="#" class="flex items-center space-x-2">
                    <img class="sitelogo" src="{{url('logo/' . system_settings('site_logo'))}}"
                        alt="{{system_settings('site_name')}}" title="{{system_settings('site_name')}}" />
                </a>

                <!-- Desktop Menu -->
                <div class="flex items-center">
                    <div class="hidden md:flex md:items-center">
                        <a href="{{route('user.dashboard')}}"
                            class="menu-link uppercase text-white hover:text-beige font-semibold transition">{{__('Dashboard')}}</a>
                        <a href="{{route('user.wallet.send.index')}}"
                            class="menu-link  uppercase text-white hover:text-beige  font-semibold transition">{{__('Send')}}</a>
                        <a href="{{route('user.wallet.swap.index')}}"
                            class="menu-link  uppercase text-white hover:text-beige  font-semibold transition">{{__('Swap')}}</a>
                        <a href="{{route('user.dashboard')}}"
                            class="menu-link  uppercase text-white hover:text-beige  font-semibold transition">Help</a>

                    </div>
                </div>
            </div>


            <div class="flex items-center space-x-4">


                <div class="hidden lg:flex justify-center items-center space-x-4">

                    <!-- Plan + Upgrade -->
                    <div class="flex flex-col items-center space-x-2 mt-2">

                        <a href="{{ route('user.wallet.index', ['receive'])  }}"
                            class="bg-primary-gradient text-black hover:text-white hover:bg-beige   uppercase px-6 py-2 text-xs rounded-lg font-semibold transition">
                            Recieve
                        </a>
                    </div>

                    <!-- Notifications -->
                    <a href="{{url('notifications')}}" class="flex items-center px-2 text-white hover:text-beige">
                        <span class="block text-xs mr-1">{{auth()->user()->unread_count}}</span>
                        <i class="far fa-bell icon-navbar"></i>
                    </a>

                    <!-- User Dropdown -->
                    <div x-data="{ open: false }" class="relative">
                        <button @click="open = !open" @click.away="open = false"
                            class="flex items-center focus:outline-none">
                            <div class="rounded-full bg-gray-200 w-8 h-8 flex items-center justify-center mr-1">
                                <i class="bi bi-person text-gray-600"></i>
                            </div>
                            <i class="feather icon-chevron-down m-0 align-middle"></i>
                        </button>

                        <!-- Dropdown Menu -->
                        <div x-show="open" x-transition
                            class="absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-md py-2 z-50"
                            @click.away="open = false" style="display:none">

                            <!-- Profile -->
                            <a href="{{url('profile')}}"
                                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="feather icon-user mr-2"></i>
                                {{ auth()->user()->verified_id == 'yes' ? __('general.my_page') : __('users.my_profile') }}
                            </a>

                            <!-- Partnership -->
                            <a href="{{route('user.settings.index')}}"
                                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="feather icon-user mr-2"></i>
                                {{ auth()->user()->verified_id == 'yes' ? __('general.my_page') : __('Settings') }}
                            </a>
                            <a href="{{route('user.settings.account.index')}}"
                                class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="feather icon-user mr-2"></i>
                                {{ auth()->user()->verified_id == 'yes' ? __('general.bookings') : __('Profile') }}
                            </a>
                            <div class="border-t my-2"></div>

                            <!-- Logout -->
                            <button onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                                class="w-full text-left flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                <i class="feather icon-log-out mr-2"></i>
                                {{__('logout')}}
                            </button>
                            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                                {{ csrf_field() }}
                            </form>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</nav>