[Rails] サイドメニューのアクティブ化

学習記録

はじめに

ユーザー関連のページにいるときはユーザー一覧のメニューをアクティブにしたいので、実装していきましょう。

https://i.gyazo.com/3059762e53ad093a3d76bca5e3d79342.png
サイドメニュー

Bootstrapを使用しているので、クラス属性にactive を含めると、このようにスタイルが適用されます。

https://i.gyazo.com/09e2d0f186e98c41446196a4d60c3fd6.png
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
Navs
Navs(ナビ)では, ナビゲーションコンポーネントを利用するためのドキュメントと例を示します。

作業の流れ

  • ヘルパーメソッドを定義する
  • ビューファイルで使う

ヘルパーメソッドを定義する

def active_if(path)
  path == controller_path ? 'active' : ''
end

controller_pathで、コントローラのパスを取得できます。

irb(main):001:0> Admin::UsersController.controller_path
=> "admin/users"

三項演算子を使っており、真の場合active を返し、偽の場合は何も返しません。

ビューファイルで使う

<%= link_to admin_users_path, class: "nav-link #{ active_if('admin/users') }" do %>

参考記事

Navs
Navs(ナビ)では, ナビゲーションコンポーネントを利用するためのドキュメントと例を示します。

コメント

タイトルとURLをコピーしました