Laravel 動態選單切換當前 Class（Active Class）的方法

在 Laravel 開發專案時，我們經常需要在選單中高亮顯示目前所在的頁面，以提升使用者體驗。本篇教學將示範如何根據當前路由名稱，讓選單中的對應項目自動添加 active class。

1. 問題描述

我們有一組選單，包含名稱、對應的 URL 及相關的 route name 陣列，當前頁面如果對應到這些 route name 之一，應該要自動加上 active class。

@php
    $menu=[
        [
            "name"=> "女孩列表",
            "url" => route('girls'),
            "url_name"=> ["girls", "girl"]
        ]
    ];
@endphp

<div>
    <ul class="list-unstyled d-flex m-0 main-menu">
        @foreach($menu as $item)
            <li>
                <a class="{{ request()->routeIs($item["url_name"]) ? "active": "" }}" href="{{ $item["url"] }}">{{ $item["name"] }}</a>
            </li>
        @endforeach
    </ul>
</div>

問題點

routeIs() 只能接受單一參數或陣列，但我們要檢查的是 url_name 陣列中的任一值，因此需要改進寫法。

2. 改進方式

我們使用 collect() 方法來處理 url_name 陣列，並檢查當前的路由名稱是否與 url_name 陣列中的任一項目是否有對應到。

改進後的程式碼

@php
    $menu=[
        [
            "name"=> "女孩列表",
            "url" => route('girls'),
            "url_name"=> ["girls", "girl"]
        ]
    ];
@endphp

<div>
    <ul class="list-unstyled d-flex m-0 main-menu">
        @foreach($menu as $item)
            <li>
                @php
                    // 檢查當前路由名稱是否在 url_name 陣列內
                    $isActive = collect($item["url_name"])->contains(fn($name) => request()->routeIs($name));
                @endphp
                <a class="{{ $isActive ? 'active' : '' }}" href="{{ $item['url'] }}">{{ $item['name'] }}</a>
            </li>
        @endforeach
    </ul>
</div>

主要改進點

1. 使用 collect()：將 url_name 陣列轉換為 Laravel 集合（Collection）。

2. 使用 contains() 方法：判斷 url_name 陣列中的任一值是否符合當前路由名稱。

3. 使用 fn($name) => request()->routeIs($name)：透過匿名函式逐一比對 route name，如果符合，則回傳 true。

4. 根據 $isActive 設定 active class：如果 isActive 為 true，則加入 active class。

Route 的設定如下：

Route::get('/girls', function () {
    return view('girls');
})->name('girls');

Route::get('/girl/{id}', function ($id) {
    return view('girl-profile', ['id' => $id]);
})->name('girl');

4. 結論

透過 collect() 和 contains() 方法，我們可以更靈活地管理選單 active 標記，無論是單一路由還是多個相關路由名稱都能輕鬆對應。這種方式適用於各種 Laravel 專案，讓選單管理更加直覺與易於維護。

希望這篇教學能幫助你在 Laravel 項目中更有效地管理選單的 active 標記！