Search code examples
laravel-5localemultilingual

Laravel 5.3: How-to mark navigation menu as active, when the request matches the URL (with language)


I want to mark a navigation menu as "active", when the URL matches the request.

This is working fine:

    <div class="sidebar">
            <ul class="sidebar-menu">
                    <li {{{ (Request::is('en/dashboard') ? 'class=active' : '') }}}>
                            <a href="/{{ App::getLocale() }}/dashboard">
                                    <i class="fa fa-dashboard"></i> <span>{{ trans('sidebar.dashboard') }}</span>
                            </a>
                    </li>

                    <li {{{ (Request::is('en/settings') ? 'class=active' : '') }}}>
                            <a href="/{{ App::getLocale() }}/settings">
                                    <i class="fa fa-gears"></i> <span>{{ trans('sidebar.settings') }}</span>
                            </a>
                    </li>
            </ul>
    </div>

Unfortunately, it's only working and marking the navigation menu, when the URL uses the language code "en". But how can I replace the static string "en" with something more dynamic?

I've already tried to solve this problem by using this code, but it doesn't work:

    <li {{{ (Request::is('{{ App::getLocale() }}/dashboard') ? 'class=active' : '') }}}>

What's the best way to solve this?


Solution

  • I'm now using this solution, which works very well and keeps the blade clean.

    First of all, give each of your routes a unique name in your routes/web.php:

        <?php
    
        /*
        |--------------------------------------------------------------------------
        | Web Routes
        |--------------------------------------------------------------------------
        |
        | Here is where you can register web routes for your application. These
        | routes are loaded by the RouteServiceProvider within a group which
        | contains the "web" middleware group. Now create something great!
        |
        */
    
        Route::get('/admin/dashboard', 'DashboardController@getAll')->name('dashboard');
        Route::get('/admin/maintenances', 'MaintenanceController@get')->name('maintenances-overview');
        Route::get('/admin/users', 'UserController@getUsers')->name('users-overview');
    

    In your navigation blade (eg. resources/views/layouts/admin/navbar.blade.php), you can now simply reference to these names:

        <li class="{{ Route::currentRouteName() == 'dashboard' ? 'active' : '' }}">
            <a href="{{ route('dashboard') }}">Dashboard</a>
        </li>
    
        <li class="{{ Route::currentRouteName() == 'maintenances-overview' ? 'active' : '' }}">
            <a href="{{ route('maintenances-overview') }}">Maintenances</a>
        </li>
    
        <li class="{{ Route::currentRouteName() == 'users-overview' ? 'active' : '' }}">
            <a href="{{ route('users-overview') }}">Users</a>
        </li>
    

    This solution is also very helpful, when you've a multi-language site, because you don't have to use regular expressions to determine, if it's now a matching URL or not. You also can edit and update your route URLs to whatever you want to without the need to update all your blades, just because the URL got changed. The route() function returns autom. the updated URL and the Route::currentRouteName() function does always return the set name of your route. :)

    Just as hint for multi-language sites: You can simply replace the static text Users with a language variable:

        <li class="{{ Route::currentRouteName() == 'users-overview' ? 'active' : '' }}">
            <a href="{{ route('users-overview') }}">@lang('layouts/admin/navbar.users')</a>
        </li>
    

    For further information regarding localization, please take a look at the laravel.com localization documentation