@php
    try {
        $href = route($route);
        $pattern = $activePattern ?? (rtrim($route, '.*') . '*');
        $active = request()->routeIs($pattern);
    } catch (\Exception $e) {
        $href = '#';
        $active = false;
    }
@endphp
<a href="{{ $href }}"
   @if($active) x-init="$el.scrollIntoView({ block: 'nearest' })" @endif
   class="group flex items-center gap-2.5 rounded-xl px-2.5 py-2 text-sm font-medium transition-colors"
   :class="darkMode
       ? '{{ $active ? 'bg-orange-500/15 text-orange-400' : 'text-gray-400 hover:bg-gray-800/60 hover:text-white' }}'
       : '{{ $active ? 'bg-orange-500/10 text-orange-600 font-semibold' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' }}'">
    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition-colors"
          :class="darkMode
              ? '{{ $active ? 'bg-orange-500 text-white' : 'bg-gray-800 text-gray-500 group-hover:bg-gray-700 group-hover:text-gray-300' }}'
              : '{{ $active ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-400 group-hover:bg-gray-200 group-hover:text-gray-600' }}'">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8"
             stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
            <path d="{{ $icon }}"/>
        </svg>
    </span>
    {{ $label }}
</a>