{{-- Sidebar untuk User --}}
<aside class="flex flex-col w-60 shrink-0 bg-slate-950 border-r border-slate-800">

    {{-- Brand --}}
    <div class="flex items-center gap-2 px-5 py-5 border-b border-slate-800">
        <span class="text-xl">🌍</span>
        <span class="text-sm font-semibold leading-tight text-white">
            Global Supply<br>Chain Intel
        </span>
    </div>

    {{-- Navigation --}}
    <nav class="flex-1 overflow-y-auto py-4 px-3 space-y-0.5">

        @php
            $link = function (string $label, string $icon, string $route, string $match = '') {
                $active = request()->routeIs($match ?: $route)
                    ? 'bg-slate-800 text-white'
                    : 'text-slate-400 hover:bg-slate-800 hover:text-white';
                return '<a href="' . route($route) . '" '
                    . 'class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ' . $active . '">'
                    . '<span class="text-base leading-none">' . $icon . '</span>'
                    . e($label)
                    . '</a>';
            };
        @endphp

        {{-- Main Menu untuk User --}}
        {!! $link('Dashboard',     '🏠', 'user.dashboard') !!}
        {!! $link('Countries',     '🌍', 'user.countries.index',    'user.countries.*') !!}
        {!! $link('Ports',         '⚓', 'user.ports.index',        'user.ports.*') !!}
        {!! $link('Weather',       '🌤', 'user.weather.index',      'user.weather.*') !!}
        {!! $link('Currency',      '💱', 'user.currency.index',     'user.currency.*') !!}
        {!! $link('News',          '📰', 'user.news.index',         'user.news.*') !!}

        {{-- Analysis Section --}}
        <div class="pt-4 pb-1 px-3">
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-600">Analysis</p>
        </div>

        {!! $link('Compare',       '🔄', 'user.compare.index') !!}
        {!! $link('Visualize',     '📊', 'user.visualize.index',    'user.visualize.*') !!}
        {!! $link('Watchlist',     '⭐', 'user.watchlist.index',    'user.watchlist.*') !!}

    </nav>

    {{-- Footer --}}
    <div class="px-5 py-4 border-t border-slate-800">
        <p class="text-xs text-slate-600">User Dashboard</p>
    </div>

</aside>