メニューのアクティブ化

メニューのアクティブ化

下記のようにメニューボタンをクリックしたらアクティブ化する

[手順]

Bootstrapの機能により、classでactiveを設定すると設定した部分がアクティブ化する
メニューのボタンが複数存在する時に以下のようにそれぞれにclassでactiveを設定すると以下のようになってしまう(本来はクリックした時にクリックした部分たけアクティブにしたい)

[app/views ファイル]

<%= link_to admin_boards_path, class: "nav-link active" do %>

<%= link_to admin_users_path, class: "nav-link active" do %>

↓

以下のように記述する

[app/views ファイル]
<%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>

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

[app/helpers/application_helper.rb]

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

上記記述により、
どこもクリックしていない時: 下記画面は[dashboards]コントローラの[index]アクションの画面なので[active_if('admin/boards')]も[active_if('admin/users')]もdef active_if(path)がfalseになり返り値が['']なので、メニューアクティブにならない

メニューをクリックした時: 下記画面は[admin::boards]コントローラの[index]アクションの画面なので[active_if('admin/boards')]部分がdef active_if(path)がtrueになり返り値が['active']になり、メニューがアクティブになる
[admin::boards]コントローラの[index]アクションの画面なので[active_if('admin/users')]部分はdef active_if(path)がfalseになり返り値が['']になり、アクティブ化されない

別解として以下のような記述の方法もある

[app/helpers/application_helper.rb]

def active_if(*path)
  active_menu?(*path) ? 'active' : ''
end

def active_menu?(*path)
  path.any? { |c| c == controller_path }
end

[app/views ファイル]

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

上記の記述だと、引数を複数渡せるように可変長引数を使って、どれかに当てはまればactiveにするという事が実現できる
def active_menu?(*path)は、以下の記述を省略した書き方

def active_menu?(*path)
  path.any?  do |c|
    c == controller_path
  end
end

※ポイント

・[controller_path]でコントローラのパスを取得できる
・可変長引数: 引数が固定ではなく任意の個数を受け取れる(＊のついた引数は可変長引数)

参考記事:

サイドメニューのアクティブ・非アクティブ化 - Ruby on Rails Learning Diary

Ruby on RailsでAction名やController名を取得する

Railsでアクティブなページに対応するタブのスタイル変える場合 - なんかの備忘録

【Rails入門】any?メソッドの便利な使い方を紹介 | 侍エンジニアブログ

Rubyにおける可変長引数の使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン