Automatically highlight nav links

Automatically highlight nav links when exact URL matches, or pass a path or route name pattern.

A Blade component with request and CSS classes helpers makes it ridiculously simple to show active/inactive state.

class NavLink extends Component
{
    public function __construct($href, $active = null)
    {
        $this->href = $href;
        $this->active = $active ?? $href;
    }
 
    public function render(): View
    {
        $classes = ['font-medium', 'py-2', 'text-primary' => $this->isActive()];
 
        return view('components.nav-link', [
            'class' => Arr::toCssClasses($classes);
        ]);
    }
 
    protected function isActive(): bool
    {
        if (is_bool($this->active)) {
            return $this->active;
        }
 
        if (request()->is($this->active)) {
            return true;
        }
 
        if (request()->fullUrlIs($this->active)) {
            return true;
        }
 
        return request()->routeIs($this->active);
    }
}

<a href="{{ $href }}" {{ $attributes->class($class) }}>
    {{ $slot }}
</a>

<x-nav-link :href="route('projects.index')">Projects</x-nav-link>
<x-nav-link :href="route('projects.index')" active="projects.*">Projects</x-nav-link>
<x-nav-link :href="route('projects.index')" active="projects/*">Projects</x-nav-link>
<x-nav-link :href="route('projects.index')" :active="$tab = 'projects'">Projects</x-nav-link>