Сохраняйте страницу активной на панели навигации (не по умолчанию), используя функцию «включить навигацию» - PullRequest
0 голосов
/ 28 сентября 2019

Я храню свою навигацию в отдельном файле nav.blade.php и использую @include('includes.nav'), чтобы показать навигацию на каждой странице.Это прекрасно работает, но я теряю способность выделять текущие страницы.

Это было решено здесь красиво.

У меня есть вторая навигация, которая не использует загрузочную функцию по умолчанию active, поэтому я решил обратиться к этому здесь.

Структура страницы

У меня есть папка с именем user_adminс его собственной начальной загрузкой, хранящейся в файле с именем nav_user_admin.blade.php.

Затем вызывается на каждой странице с помощью @include('includes.nav_user_admin').

Я включаю это в head

@if(Request::is('route-name')) active @endif

Навигационный дизайн

Каждая вкладка имеет bg-secondary с text-light.Как мне тогда показать bg-white и удалить функцию text-light, когда страница активна?

<div class="list-group list-group-flush ">
    <a class="nav-link @if(Request::is('home')) active @endif" href="home" id="corner1" class="list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action ">Dashboard</a>
    <a class="nav-link @if(Request::is('groups')) active @endif" href="groups" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Groups I've Created<span class="badge badge-light badge-pill">3</span></a>
    <a class="nav-link @if(Request::is('')) active @endif" href="" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Groups I've Joined<span class="badge badge-light badge-pill">8</span></a>
    <a class="nav-link @if(Request::is('settings')) active @endif" href="settings" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Account Settings</a>
    <a class="nav-link @if(Request::is('profile_settings')) active @endif" href="profile_settings" class="bg-secondary text-light list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action">Profile Settings</a>
</div>

Проблема

Выполнение вышеизложенного дает мне навигацию свсе вкладки bg-вторичные и весь текст синим?Нет никакой разницы между активными и не активными вкладками.

1 Ответ

1 голос
/ 28 сентября 2019

Можно сделать вот так

<a class="nav-link list-group-item d-flex justify-content-between align-items-center list-group-item-light list-group-item-action @if(Request::is('settings')) bg-white @else bg-secondary text-light @endif" href="settings">Account Settings</a>

Может быть, я не правильно его стилизовал, как вы хотите, но.

@if(Request::is('settings')) the classes you want when it is active @else the classes when it is not active @endif"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...