Как выделить текущее активное меню в приложении Laravel 5.6? - PullRequest
Новая
       9

Как выделить текущее активное меню в приложении Laravel 5.6?

0 голосов
/ 01 ноября 2018

Я использую следующие пункты меню начальной загрузки в приложении My laravel, 

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span> Content Management</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-pencil text-primary"></span><a href="{{route('categories.index')}}">Category</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-pencil text-primary"></span><a href="{{route('brands.index')}}">Brand</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-pencil text-primary"></span><a href="{{route('models.index')}}">Model</a>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-flash text-success"></span><a href="{{route('provinces.index')}}">Province</a>
                                    </td>
                                </tr>

                            </table>
                        </div>
                    </div>
                </div>
</div>

и использование этой строки меню с @include ('menubar) с другими блейд-файлами. Теперь мне нужно выделить текущий пункт меню при посещении каждой страницы. как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Вы можете использовать этот пакет, который я написал, чтобы сделать это: https://packagist.org/packages/arcesilas/active-state

Пример с вашим кодом: 

<div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
        <table class="table">
            <tr>
                <td>
                    <span class="glyphicon glyphicon-pencil text-primary"></span><a href="{{route('categories.index')}}" class="{{ active_route_is('categories.index')}}">Category</a>
                </td>
            </tr>

            <tr>
                <td>
                    <span class="glyphicon glyphicon-pencil text-primary"></span><a href="{{route('brands.index')}}" class="{{ active_route_is('brands.index')}}">Brand</a>
                </td>
            </tr>

            <tr>
                <td>
                    <span class="glyphicon glyphicon-pencil text-primary"></span><a href="{{route('models.index')}}" class="{{ active_route_is('models.index')}}">Model</a>
                </td>
            </tr>

            <tr>
                <td>
                    <span class="glyphicon glyphicon-flash text-success"></span><a href="{{route('provinces.index')}} class="{{ active_route_is('provinces.index')}}"">Province</a>
                </td>
            </tr>

        </table>
    </div>
</div>

Этот пакет также позволяет вам проверить URL, маршрут с заданными параметрами или запрос.

0 голосов
/ 01 ноября 2018

использование 

{{ request()->route()->getName() }}

или 

{{ route()->currentRouteName() }}

тогда вы можете сделать что-то вроде 

<a class="{{ request()->route()->getName() === "brands.index" ? "active" : "not-active" }}">
...