メニュータブのアクティブ・非アクティブを設定する

アクティブ・非アクティブとは、今自分がいるページのメニュー名をアクティブにします。

例えばTwitterのサイドメニューでも使われている機能です。
画像では「通知」のページを開いているので、「通知」がアクティブになっています。

f:id:kimura34:20210319202107p:plain

実装方法

このサイトを見ながら実装していきました。

(application_helper.rb)
def active?(controller_name)
  return 'active' if controller_name == params[:controller]
end

`active?メソッドを作って、引数でコントローラ名を指定しています。
もし引数のコントローラ名とパラメータで送られてきたコントローラ名が一緒だったらactiveを返します。

(ビューファイル)
<%= link_to users_path, class: "nav-link #{active?('users')}" do %>

この記述でも正常に動きますが、
三項演算子を使った書き方に変えてみます。

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

(ビューファイル)
<%= link_to users_path, class: "nav-link #{active_if('users')}" do %>