THIS IS MAGIC request()-routeIs('d-category-*') in Laravel

▶

Tired of constantly asking if you are defined in this route or that other route just to indicate your current route and writing:

<flux:navlist.item icon="wrench-screwdriver" :href="route('d-category-index')" :current="request()->routeIs('d-category-index') || request()->routeIs('d-category-create') || request()->routeIs('d-category-create')" wire:navigate>{{ __('Category') }}</flux:navlist.item>

We can use an *:

d-category

This is simply the prefix:

<flux:navlist.item icon="wrench-screwdriver" :href="route('d-category-index')" :current="request()->routeIs('d-category-*')" wire:navigate>{{ __('Category') }}</flux:navlist.item>

It will always capture it, and from here on, you can put whatever you want. Therefore, if you follow a good naming convention for your routes:

Route::get('/', App\Livewire\Dashboard\Category\Index::class)->name("d-category-index"); Route::get('/create', App\Livewire\Dashboard\Category\Save::class)->name("d-category-create"); Route::get('/edit/{id}', App\Livewire\Dashboard\Category\Save::class)->name("d-category-edit");

Surely, in this case, for these routes that I have, you can see that they all share the same category prefix, and only the operation varies—so to speak—index, create, or edit. Therefore, this asterisk will work for index, as well as for create or edit. So you can see that, with this single rule here, I've already covered all pages starting with category, regardless of what comes after; everything will stay marked without any problem.

Beyond that, there isn't much mystery. We are simply placing the request and asking, through an existing method, if the route is exactly the one we have defined. This method returns a boolean thanks to the function called routeIs.

In this case, again, it is a Livewire component, and it works like this: you could place your class, some conditional... whatever you feel like, depending on the style you are using. But here, being a Flux component, what we are indicating with "current" is a boolean that activates the border you see here if it's true; if it's false, it simply doesn't activate.

The important thing here is the condition; the styling part depends entirely on what you are using in your project.