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

Метод 1: использование директивы @if
Самый простой способ создать динамическое активное меню в Laravel Blade — использовать директиву @if. Этот подход предполагает сравнение текущего маршрута с маршрутом пункта меню и применение класса CSS, если они совпадают. Вот пример:

<ul>
    <li class="{{ request()->is('dashboard') ? 'active' : '' }}">
        <a href="{{ route('dashboard') }}">Dashboard</a>
    </li>
    <li class="{{ request()->is('profile') ? 'active' : '' }}">
        <a href="{{ route('profile') }}">Profile</a>
    </li>
    <!-- Add more menu items -->
</ul>

Метод 2: использование вспомогательной функции
Другой подход заключается в определении вспомогательной функции, которая проверяет текущий маршрут и возвращает соответствующий класс CSS. Этот метод обеспечивает большую гибкость и возможность повторного использования. Вот пример:

// Define a helper function in your app/helpers.php file or any autoloaded file
function setActiveMenu($route)
{
    return request()->is($route) ? 'active' : '';
}

<ul>
    <li class="{{ setActiveMenu('dashboard') }}">
        <a href="{{ route('dashboard') }}">Dashboard</a>
    </li>
    <li class="{{ setActiveMenu('profile') }}">
        <a href="{{ route('profile') }}">Profile</a>
    </li>
    <!-- Add more menu items -->
</ul>

Метод 3: использование компоновщика представлений
Более продвинутый метод предполагает использование компоновщика представлений для установки переменной, указывающей активный элемент меню. Этот подход полезен, когда у вас сложная структура меню. Вот пример:

// In your AppServiceProvider.php file or create a new service provider
use Illuminate\Support\Facades\View;
public function boot()
{
    View::composer('layouts.app', function ($view) {
        $view->with('activeMenu', request()->route()->getName());
    });
}

<ul>
    <li class="{{ $activeMenu === 'dashboard' ? 'active' : '' }}">
        <a href="{{ route('dashboard') }}">Dashboard</a>
    </li>
    <li class="{{ $activeMenu === 'profile' ? 'active' : '' }}">
        <a href="{{ route('profile') }}">Profile</a>
    </li>
    <!-- Add more menu items -->
</ul>

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