Laravel Jetstream - Navigation - Passing route name data to :active navigation

user_2353968 0
Viewed 3008

In my navigation-dropdown.blade.php (from Laravel Jetstream), I have:

        <x-jet-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
            {{ __('Dashboard') }}
        </x-jet-responsive-nav-link>

        <x-jet-responsive-nav-link href="/purchases" :active="request()->routeIs('purchases.index')">
            {{ __('Purchases') }}
        </x-jet-responsive-nav-link>                       

        <x-jet-responsive-nav-link href="/debug" :active="request()->routeIs('debug')">
            {{ __('Debug') }}
        </x-jet-responsive-nav-link>

In my routes/web.php, I have:

Route::middleware(['auth:sanctum', 'verified'])->resource('purchases','App\Http\Controllers\PurchaseController')->name('*', 'purchases');

Route::middleware(['auth:sanctum', 'verified'])->get('/debug', [DebugController::class, 'index'])->name('debug');

I visit /purchases and :isActive does not set, but when I visit /debug, it does. In other words, appending ->name('debug') to the route adds an underline to the 'Debug' when you are on the /debug view as expected.

However, appending ->name('purchases') to the resource route causes an exception about not enough parameters. Calling ->name('*', 'purchases') throws no exception but does nothing (there is no underline on this navigation item).

Whilst on the /debug view, you see:

Screenshot of navigation with Debug underlined

Whilst on the /purchases view, you see no underline:

Missing underline on navigation item

How do I fix this? I have also tried:

        <x-jet-responsive-nav-link href="/purchases" :active="request()->routeIs('purchases')">
            {{ __('Purchases') }}
        </x-jet-responsive-nav-link>
jetstream laravel-livewire laravel php
1 Answers

i would use the route-name in href="":

<x-jet-responsive-nav-link href="{{route('purchases.index')}}" :active="request()->routeIs('purchases.index')">
    {{ __('Purchases') }}
</x-jet-responsive-nav-link>

also i would check active with a wildcard (*) to ensure it is active while your on another site like 'purchases.edit':

<x-jet-responsive-nav-link href="{{route('purchases.index')}}" :active="request()->routeIs('purchases.*')">
    {{ __('Purchases') }}
</x-jet-responsive-nav-link>

in general is a good idea to protect the routes with a middleware group so you dont have to add the middleware to each route:

Route::group(['middleware' => ['auth:sanctum', 'verified']], function(){
    Route::resource('purchases', PurchaseController::class); //resources don't need manual name
    Route::get('/debug', [DebugController::class, 'index'])->name('debug');
});

*dont forget

use 'App\Http\Controllers\PurchaseController';

in your route file or use full qualified name in Route:

Route::resource('purchases', App\Http\Controllers\PurchaseController::class);
user_110682480
Related