@php
    if (!isset($active)) {
        $active = false;
    }
@endphp
<a class="{{ $active 
    ? 'bg-primary text-white hover:bg-primary-600 active:bg-primary-700' 
    : 'text-secondary-600 hover:bg-secondary-50 active:bg-secondary-100' }} 
    flex items-center gap-1 px-4 py-2 text-sm"
   href="{{ $route }}" wire:navigate>
    <x-icon name="{{ $icon }}" sm />
    <span>{{ $title }}</span>
</a>