CODEWITHSUNDEEP
laravel-5localemultilingual
checker284
checker284

Reputation: 1326

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?

Upvotes: 2

Views: 6210

Answers (4)

Michael
Michael

Reputation: 596

Just drop this little function code in your helpers class

function is_current_route($route){
    return Route::currentRouteName() == $route ? 'class=active' : '';
}

And use it like this in your views 

<li {{is_current_route('your-route-name-here')}}>
<a href="{{ url("/home") }}>Home</a>
</li>

Upvotes: 0

checker284
checker284

Reputation: 1326

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

Upvotes: 4

RileyManda
RileyManda

Reputation: 2651

It simple.Just do the following in your file that contains your header or navbar and the links:

<li class="{{ (Request::path()=='nameofyourfile' ? 'active' : '') }}">
 <a href="{{ route('nameofyourfile') }}">
                        <span class="icon fa fa-building-o" aria-hidden="true"></span><span class="title">nameofyourfile</span>
                                                </a></li>

Upvotes: 0

Tim Lewis
Tim Lewis

Reputation: 29316

Usually, I have a layout with these nav items extended by the current view, so something like:

<li><a href="{{ url("home") }}>Home</a></li>
<li><a href="{{ url("about") }}>About</a></li>
<li><a href="{{ url("contact") }}>Contact</a></li>

Then my routes:

Route::get("/home", "BasicController@getHome");

Then in my controller:

public function getHome(){
    return view("home")->with(["page" => "home"]);
}

Now that my view home.blade.php has a $page being passed to it, and since it extends the .blade file with the nav section (usually @extends("layouts.master") or something) you can access and check the $page variable against these nav items:

<li class="{{ $page == "home" ? "active" : "" }}><a href="{{ url("/home") }}>Home</a></li>

This way you don't have to worry about matching routes in multiple languages to their active page. The only downside is that you need to include a ->with(["page" => "whatever"]) in each of your controllers that returns a view that extends that nav layout. There may be an easier way to accomplish that, but this should give you a start.

Upvotes: 2

Related Questions