{{-- Shared sidebar nav content — used by both desktop sidebar and mobile drawer --}}
<div class="p-5 flex items-center border-b border-slate-200 dark:border-white/5 lg:block hidden">
    <img src="{{ asset('images/logo.png') }}" alt="Vicdan Exchange" class="h-10"/>
</div>

<nav class="flex-1 px-3 sm:px-4 space-y-1 py-3 overflow-y-auto">
    @php $route = request()->route()->getName(); @endphp
    @foreach([
        ['user_dashboard',          'dashboard',               'Dashboard'],
        ['new_exchange_modal',       'swap_horizontal_circle',  'New Exchange'],
        ['transaction_history',      'receipt_long',            'Transactions'],
        ['market_rates_&_trends',    'trending_up',             'Market Rates'],
        ['chat_transaction_ui',      'chat_bubble',             'Chat Support'],
        ['notifications_&_alerts',   'notifications',           'Notifications'],
        ['security_&_activity_log',  'security',                'Security'],
        ['user_profile_settings',    'person',                  'My Profile'],
    ] as [$name, $icon, $label])
        @php $isActive = ($route === $name); @endphp
        <a href="{{ $name === 'chat_transaction_ui' ? '#' : route($name) }}"
           onclick="{{ $name === 'chat_transaction_ui' ? 'return false' : 'closeSidebar()' }}"
           class="group flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all {{ $isActive ? 'bg-primary/10 text-primary' : 'hover:bg-slate-100 dark:hover:bg-white/5 text-slate-600 dark:text-slate-400 hover:text-primary' }}">
            <div class="w-8 h-8 rounded-xl flex items-center justify-center shrink-0 {{ $isActive ? 'clay-icon-active text-white' : 'clay-icon' }}">
                <span class="material-symbols-outlined text-sm">{{ $icon }}</span>
            </div>
            <span class="font-medium text-sm">{{ $label }}</span>
            @if($name === 'notifications_&_alerts' && auth()->user()->unreadNotificationsCount > 0)
                <span class="ml-auto text-[9px] bg-primary text-white rounded-full px-1.5 py-0.5 font-bold">{{ auth()->user()->unreadNotificationsCount }}</span>
            @endif
        </a>
    @endforeach
</nav>

<div class="p-3 sm:p-4 border-t border-slate-200 dark:border-white/5">
    <a href="{{ route('new_exchange_modal') }}" onclick="closeSidebar()"
       class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 shadow-lg shadow-primary/20 transition-all text-sm">
        <span class="material-symbols-outlined text-base">add_circle</span> New Exchange
    </a>
    <form method="POST" action="{{ route('logout') }}" class="mt-2">
        @csrf
        <button type="submit" class="w-full py-2 text-slate-500 dark:text-slate-400 hover:text-red-500 text-xs font-medium flex items-center justify-center gap-2 transition-colors">
            <span class="material-symbols-outlined text-sm">logout</span> Sign Out
        </button>
    </form>
</div>