Laravelでサイドバーのアクティブなメニューを動的に変更する方法

2024-02-09 06:30 Laravel Blade メニュー

  1. ルーティングの設定: Laravelのルートファイルで、各メニュー項目に対するルートを設定します。例えば、以下のようなコードです。

    Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
Route::get('/profile', [ProfileController::class, 'index'])->name('profile');
// 他のメニュー項目のルートも同様に設定します

  2. サイドバーメニューの作成: Bladeテンプレートを使用して、サイドバーメニューを作成します。例えば、以下のようなコードです。

    <ul class="sidebar-menu">
   <li class="{{ request()->routeIs('dashboard') ? 'active' : '' }}"><a href="{{ route('dashboard') }}">ダッシュボード</a></li>
   <li class="{{ request()->routeIs('profile') ? 'active' : '' }}"><a href="{{ route('profile') }}">プロフィール</a></li>
   <!-- 他のメニュー項目も同様に設定します -->
</ul>

    上記のコードでは、request()->routeIs() 関数を使用して、現在のルートが指定したルートと一致するかどうかを判定しています。一致する場合は、active クラスを適用してメニュー項目をアクティブにします。

  3. CSSスタイルの設定: active クラスに対して適切なスタイルを適用するためのCSSを設定します。例えば、以下のようなコードです。

    .active {
   background-color: #f0f0f0;
   font-weight: bold;
}

    上記のコードでは、アクティブなメニュー項目に背景色と太字のスタイルを適用しています。

これで、LaravelのBladeテンプレートを使用してサイドバーのアクティブなメニューを動的に変更する方法がわかりました。適切なルートを設定し、request()->routeIs() 関数を使用して現在のルートと一致するかどうかを判定し、それに基づいてメニュー項目に active クラスを適用します。また、適切なCSSスタイルを設定して、アクティブなメニュー項目を目立たせることもできます。