CODEWITHSUNDEEP
laraveleloquentlaravel-8
asvp
asvp

Reputation: 19

How to mark a parent menu as active if any of it's child is active using Laravel and Eloquent?

I want to create a list of menu for my dashboard. It consists of menu name and url. Each item acts like this:

And like this, too:

I want to achieve this using Laravel 8 and Eloquent. Any help is appreciated.

Upvotes: 0

Views: 2288

Answers (2)

Peppermintology
Peppermintology

Reputation: 10220

I would consider using the Route::currentRouteName() method in conjunction the PHP strpos method to compare the current route with your named routes in web.php.

Given the following routes defined in your web.php file:

web.php

Route::group(['prefix' => '/colours', 'as' => 'colours'], function() {
    Route::get('/', function() {
        return view('colours.index');
    });

    Route::group(['prefix' => '/green', 'as' => '.green'], function() {
        Route::get('/', function() {
            return view('colours.green.index');
        });

        Route::get('/apple/', function() {
            return view('colours.green.apple');
        })->name('.apple');

        Route::get('/orchard', function() {
            return view('colours.green.orchard');
        })->name('.orchard');
    });

    Route::group(['prefix' => '/red', 'as' => '.red'], function() {
        Route::get('/', function() {
            return view('colours.red.index');
        });

        Route::get('/strawberry', function() {
            return view('colours.red.strawberry');
        })->name('.strawberry');
    });
});

Your menu could look something like the following. Note I've not made any sub/nested menu options or fancy methods for generating the menu for the purpose of this example.

menu.blade.php

<ul>
    <li><a href="{{ route('colours') }}"
           class="{{ (strpos(Route::currentRouteName(), 'colours') === 0) ? 'active' : '' }}">Colours</a></li>
    <li><a href="{{ route('colours.green') }}"
           class="{{ (strpos(Route::currentRouteName(), 'colours.green') === 0) ? 'active' : '' }}">Colours - Green</a>
    </li>
    <li><a href="{{ route('colours.green.apple') }}"
           class="{{ (strpos(Route::currentRouteName(), 'colours.green.apple') === 0) ? 'active' : '' }}">Colours -
            Green - Apple</a></li>
    <li><a href="{{ route('colours.green.orchard') }}"
           class="{{ (strpos(Route::currentRouteName(), 'colours.green.orchard') === 0) ? 'active' : '' }}">Colours -
            Green - Orchard</a></li>
    <li><a href="{{ route('colours.red') }}"
           class="{{ (strpos(Route::currentRouteName(), 'colours.red') === 0) ? 'active' : '' }}">Colours - Red</a></li>
    <li><a href="{{ route('colours.red.strawberry') }}"
           class="{{ (strpos(Route::currentRouteName(), 'colours.red.strawberry') === 0) ? 'active' : '' }}">Colours -
            Red - Strawberry</a></li>
</ul>

How this works is that we use strpos to inspect the current route name for a match against our named route (strpos($haystack, $needle)) and the tenary operator to apply an active class if it is found (true), or nothing if it is not found (false).

If you were to navigate to /colours/red/strawberry, the Strawberry, Red and Colours links would both have the active class applied. If you navigated to /colours/red the Red and Colours links would be active and if you navigated to /colours, well you get the idea.

Upvotes: 1

ml59
ml59

Reputation: 1651

Assuming you are in a blade file, you can leverage the routeIs() method from the request() helper.
The routeIs() method can take one or multiple pattern to check so for example, lets say you have 2 routes:

  1. user
  2. user.role

so now we are on the user.role route and in our blade file we are making the following check

 request()->routeIs('user') //false
 request()->routeIs('user.role') //true
 request()->routeIs('user','user.role') //true - since the second is valid
 request()->routeIs('user.*') //true - wildcard is accepted

Doc reference to the helper https://laravel.com/docs/8.x/requests#inspecting-the-request-path

I hope it can give you the tool to build your menu and the Active state

Upvotes: 4

Related Questions