Эффективные методы создания активного меню боковой панели в Laravel

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

Метод 1: использование пути запроса
Один из самых простых способов определить активный элемент меню — сравнить путь запроса с URL-адресом элемента меню. Вот пример:

<a href="{{ route('home') }}" class="{{ Request::is('home') ? 'active' : '' }}">Home</a>

Метод 2: использование текущего имени маршрута
Вы также можете использовать имя текущего маршрута, чтобы выделить активный пункт меню. Для этой цели в Laravel предусмотрен метод Route::currentRouteName(). Вот пример:

<a href="{{ route('dashboard') }}" class="{{ Route::currentRouteName() === 'dashboard' ? 'active' : '' }}">Dashboard</a>

Метод 3: использование промежуточного программного обеспечения
Промежуточное программное обеспечение Laravel можно использовать для установки активного состояния бокового меню на основе запрошенного URL-адреса. Вот пример:

  1. Создайте класс промежуточного программного обеспечения с помощью команды artisan: php artisan make:middleware ActiveMenuMiddleware.

  2. Откройте созданный файл промежуточного программного обеспечения и обновите метод handle():

public function handle($request, Closure $next)
{
    $currentPath = $request->path();
    // Determine the active menu item based on $currentPath
    // Add the active menu item to the request
    $request->merge(['activeMenu' => $activeMenuItem]);
    return $next($request);
}
  1. Зарегистрируйте промежуточное ПО в файле app/Http/Kernel.php:
protected $middlewareGroups = [
    'web' => [
        // Other middleware...
        \App\Http\Middleware\ActiveMenuMiddleware::class,
    ],
];
  1. Обновите код меню боковой панели, чтобы использовать активный элемент меню, установленный промежуточным программным обеспечением:
<a href="{{ route('products') }}" class="{{ request()->activeMenu === 'products' ? 'active' : '' }}">Products</a>

Метод 4: использование директив Blade
Директивы Blade в Laravel предоставляют краткий способ обработки условного рендеринга. Вы можете определить пользовательскую директиву для определения активного пункта меню. Вот пример:

  1. Откройте файл app/Providers/AppServiceProvider.phpи добавьте следующий код в метод boot():
Blade::directive('active', function ($routeName) {
    return "<?php echo Route::currentRouteName() === '{$routeName}' ? 'active' : ''; ?>";
});
  1. Обновите код бокового меню, чтобы использовать пользовательскую директиву:
<a href="{{ route('about') }}" class="@active('about')">About</a>

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