【Laravel】ナビゲーションに現在見ているページの位置情報を反映させる

現在ページの位置情報をフロントに反映させるという場面があります。
現在のURLを取得して解析する事自体は、jsでもphpでも可能なのですが、処理の記述が長くなってしまいがちです。

パンくずであれば、laravel-breadcrumbsというライブラリがあります。

packagist.org

一方、グローバルナビゲーションやサイドナビゲーションといったナビゲーションの位置反映については現状無さそうです。

さて、
今回はナビゲーションに現在見ているページの位置情報を表示させる方法について記述します。

環境について

Laravelのバージョンは5.8です。
フロントはBootstrap 4で実装しますので、コーディングルールはBootstrapに準じます。

getbootstrap.com

実装方法

ルーティング

下記の構成でルーティングします。
route/web.phpには、下記のルート名をnameにつけたルートをそれぞれ用意します。

ルート名 日本語名 分類 概要
dashboard ダッシュボード ダッシュボード 管理画面のトップページ
shops ショップ管理 ショップ ショップのトップページ
shops.index ショップ一覧 ショップ 登録されたショップを一覧表示
shops.create ショップ管理 ショップ 新しくショップを登録

メニューの切り替え方法について

今回は、現在見ているページのルート名が、前項の表の分類に属するか属さないかで、選択中か未選択かを切り替えるようにします。

Bootstrapのコーディングルールについて

Bootstrapでメニューを実装する場合、navbar-nav配下にnav-itemを配置します。

選択中か未選択かの切り替えは、クラスにactiveを付けることで切り替えられます。
getbootstrap.com

また、ショップ関連の子項目は、collapseクラスをまとめて、それぞれの項目は、collapse-itemとします。
メニュー開閉の初期状態はcollapseを付けたクラスに、showクラスを付与します。
collapse-itemの選択済と未選択の設定は、activeを付与します。

getbootstrap.com

実装方法

現在表示しているページのルートが、指定したルートと一致するかの判定はRequest::routeIs(<検索するルート>)で行います。
検索はroute/web.phpに登録しているルートのnameを元に行います。

routeIs*(ワイルドカード検索)や複数指定も出来ます。
それらを組み合わせる事で、shop(ショップ管理ページ)shop.*(ショップ管理配下)であれば有効にする事も出来ます。

<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
     <li class="nav-item @if(Request::routeIs('dashboard')) active @endif"><a href="{{ route('home')}}">ダッシュボード</li>
     <li class="nav-item @if(Request::routeIs('shops', 'shops.*')) active @endif">ショップ管理
         <ul class="collapse @if(Request::routeIs('admin.schools.*')) show @endif">
             <li class="collapse-item @if(Request::routeIs('admin.schools.index')) active @endif"><a href="{{ route('shops.index') }}">ショップ管理一覧</a></li>
             <li class="collapse-item @if(Request::routeIs('admin.schools.create')) active @endif"><a href="{{ route('shops.create') }}"><a href="{{ route('shops.create') }}">ショップ管理登録</a></li>

ルートパスでの検索について

もし、nameを指定していない場合は、Route::is(<検索するパス>)でも同じように検索する事が可能です。

routeIsあるいは、Isを使う場合の注意

routeIs、もしくはis正規表現ではありません。
ワイルドカードが有効なだけで、他のパターンは使えませんので複雑な指定は出来ません。

©︎2017-2018 WebSandBag