В веб-разработке навигационные меню необходимы для обеспечения удобства взаимодействия с пользователем. При использовании Laravel с Bootstrap обычно имеется панель навигации, которая выделяет активную ссылку, соответствующую текущей странице. В этой статье мы рассмотрим различные методы достижения этой функциональности на примерах кода.

Метод 1: классический активный класс
Самый простой метод — добавить «активный» класс к активной ссылке на панели навигации. Это можно сделать, сравнив текущий маршрут с маршрутом ссылки и условно применив класс.

<ul class="navbar-nav">
    <li class="nav-item {{ request()->is('home') ? 'active' : '' }}">
        <a class="nav-link" href="/home">Home</a>
    </li>
    <!-- Other navbar items -->
</ul>

Метод 2: использование помощника «route» Laravel
Laravel предоставляет помощник route, который генерирует URL-адрес для заданного маршрута. Мы можем использовать этот помощник, чтобы определить, соответствует ли текущий маршрут маршруту ссылки.

<ul class="navbar-nav">
    <li class="nav-item {{ request()->url() == route('home') ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
    </li>
    <!-- Other navbar items -->
</ul>

Метод 3: сопоставление сегментов запроса
Если ваши маршруты имеют динамические сегменты, вы можете использовать объект RequestLaravel для сравнения текущих сегментов URL-адреса с целевыми сегментами ссылки.

<ul class="navbar-nav">
    <li class="nav-item {{ request()->segment(1) == 'products' ? 'active' : '' }}">
        <a class="nav-link" href="/products">Products</a>
    </li>
    <!-- Other navbar items -->
</ul>

Метод 4: проверка контроллера и действия
Если вы предпочитаете проверять контроллер и действие вместо маршрута или URL-адреса, вы можете использовать метод Route::currentRouteAction()и сравнить его с нужным контроллером и действие.

<ul class="navbar-nav">
    <li class="nav-item {{ Route::currentRouteAction() == 'App\Http\Controllers\HomeController@index' ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
    </li>
    <!-- Other navbar items -->
</ul>

Метод 5: пользовательская вспомогательная функция
Вы можете создать собственную вспомогательную функцию, чтобы инкапсулировать логику определения активной ссылки и упростить код.

// In a helper file or service provider
function isNavLinkActive($routeName)
{
    return request()->routeIs($routeName) ? 'active' : '';
}
// In your navbar
<ul class="navbar-nav">
    <li class="nav-item {{ isNavLinkActive('home') }}">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
    </li>
    <!-- Other navbar items -->
</ul>

Метод 6: использование JavaScript и CSS
Если вы хотите обрабатывать подсветку активной ссылки на стороне клиента, вы можете использовать JavaScript для добавления или удаления класса CSS на основе текущего URL-адреса или маршрута.

<script>
    $(document).ready(function() {
        var currentUrl = window.location.href;
        $('.navbar-nav a.nav-link').each(function() {
            if ($(this).attr('href') === currentUrl) {
                $(this).addClass('active');
            }
        });
    });
</script>

Метод 7: Промежуточное программное обеспечение активной ссылки.
Вы можете создать собственное промежуточное программное обеспечение, которое устанавливает переменную, указывающую активную ссылку, которую затем можно использовать в представлении панели навигации.

// In your middleware
public function handle($request, Closure $next)
{
    $currentRoute = $request->route()->getName();
    view()->share('activeRoute', $currentRoute);
    return $next($request);
}
// In your navbar
<ul class="navbar-nav">
    <li class="nav-item {{ $activeRoute === 'home' ? 'active' : '' }}">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
    </li>
    <!-- Other navbar items -->
</ul>

Метод 8: использование Laravel Livewire
Если вы используете Laravel Livewire, вы можете использовать его встроенные возможности для обработки активной подсветки ссылок. Livewire предоставляет директиву wire:click, которую можно использовать для обнаружения активной ссылки.

<ul class="navbar-nav">
    <li class="nav-item" wire:click="$emit('changeActiveLink', 'home')" :class="{ 'active': activeLink === 'home' }}">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
    </li>
    <!-- Other navbar items -->
</ul>

В этой статье мы рассмотрели восемь различных методов выделения активных ссылок в навигационной панели Bootstrap с помощью Laravel. Независимо от того, предпочитаете ли вы подход на стороне сервера или на стороне клиента, существует множество вариантов достижения желаемой функциональности. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и реализуйте его в своем приложении Laravel, чтобы улучшить удобство использования вашего навигационного меню.