В веб-разработке создание бокового меню, которое динамически выделяет активную страницу, является распространенным требованием. 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-адреса. Вот пример:
-
Создайте класс промежуточного программного обеспечения с помощью команды artisan:
php artisan make:middleware ActiveMenuMiddleware. -
Откройте созданный файл промежуточного программного обеспечения и обновите метод
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);
}
- Зарегистрируйте промежуточное ПО в файле
app/Http/Kernel.php:
protected $middlewareGroups = [
'web' => [
// Other middleware...
\App\Http\Middleware\ActiveMenuMiddleware::class,
],
];
- Обновите код меню боковой панели, чтобы использовать активный элемент меню, установленный промежуточным программным обеспечением:
<a href="{{ route('products') }}" class="{{ request()->activeMenu === 'products' ? 'active' : '' }}">Products</a>
Метод 4: использование директив Blade
Директивы Blade в Laravel предоставляют краткий способ обработки условного рендеринга. Вы можете определить пользовательскую директиву для определения активного пункта меню. Вот пример:
- Откройте файл
app/Providers/AppServiceProvider.phpи добавьте следующий код в методboot():
Blade::directive('active', function ($routeName) {
return "<?php echo Route::currentRouteName() === '{$routeName}' ? 'active' : ''; ?>";
});
- Обновите код бокового меню, чтобы использовать пользовательскую директиву:
<a href="{{ route('about') }}" class="@active('about')">About</a>
В этой статье мы рассмотрели несколько способов создания активного меню боковой панели в Laravel. В зависимости от требований вашего проекта вы можете выбрать наиболее подходящий подход. Используя эти методы, вы можете улучшить взаимодействие с пользователем, предоставляя визуальные подсказки для активного пункта меню.