現在のページに応じてactiveクラスを付与する

メニューリストとかで現在のページに応じて色がついてたらサイトが見やすくなりますよね。

Boardsページにいる時

Usersページにいる時

こんな感じにしたいです。

今回はこれを実装していきます。
前回作ったアプリにBootstrapを導入してBoardのCRUD機能をつけておきました。
viewも最低限整えてます。

どう実装するかですが、現在のページに応じて、というところが肝になりそうです。
では何で判断すればいいか。
そのページがどのコントローラを通っているか、を判断できるようなメソッドを作れば実装できそうです。

ヘルパーメソッドを作成

app/helpers/application_helper.rbにヘルパーメソッドを定義します。

module ApplicationHelper
  def add_active(controller_name)
    if controller_name == params[:controller]
      return 'active'
    end
end

もしparamsで受け取っているcontrollerが引数で渡したcontroller_nameと一致していたら、文字列'active'を返す。
というメソッドです。

viewに記述

_menu.html.erb

<ul class="nav nav-pills">
  <li>
    <%= link_to 'User List', root_path, class: "nav-link #{add_active('users')}" %> <%# users_controllerを通っていたらadd_activeメソッドを適用 %>
  </li>
  <li>
    <%= link_to 'Board List', boards_path, class: "nav-link #{add_active('boards')}" %> <%# boards_controllerを通っていたらadd_activeメソッドを適用 %>
  </li>
</ul>