【Rails】ナビゲーションにて動的に.activeをlink_toに付与したい

Question

#動的にactiveクラスをlink_toに付与したい

BootstrapのDashboardサイドバーみたく.activeクラスをRailsで動的にlink_toに付与したい。

表示ページのサイドバー項目はbackgroundが青色になっています。

ul.nav.nav-pills.flex-column
 li.nav-item = link_to "action1"  ,action1_path ,class:'nav-link active' ← このactiveを動的にしたい。
 li.nav-item = link_to "action2"  ,action2_path  ,class:'nav-link'
 li.nav-item = link_to "action3"  ,action3_path  ,class:'nav-link'
 

こんな感じのコードだとすれば、どうすれば実装できるのでしょうか。
controllerを編集する必要があるのか、viewだけの編集で済むのか、
いまいちイメージができません。

ご教授いただける方、宜しくお願いします。

#追伸1

params[:action]は使えませんか。
viewでコントローラの各アクションを区別することはできませんか。

#追伸2 サイドバーのコードはパーシャルです。
これを前提にお願いします。

#追伸3

現状、正常に動く

- if controller.action_name == "show"
  li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:'nav-link active'
- else
  li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:'nav-link'


- if controller.action_name == "following"
  li.nav-item = link_to "フォロー"      ,[:following,:user,:mypage] ,class:'nav-link active'
- else
  li.nav-item = link_to "フォロー"      ,[:following,:user,:mypage] ,class:'nav-link'

- if controller.action_name == "clipping"
  li.nav-item = link_to "クリップ"      ,[:clipping,:user,:mypage]  ,class:'nav-link active'
- else
  li.nav-item = link_to "クリップ"      ,[:clipping,:user,:mypage]  ,class:'nav-link'

現状、正常に動かない

li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:"nav-link #{ active if controller.action_name == 'show'}"

や

li.nav-item = link_to "トップ"        ,[:user,:mypage]            ,class:"nav-link #{ active if params[:action: == 'show'}"

どうもこれだと動きません...。

Answer 1

li.nav-item = link_to "トップ"  ,[:user,:mypage]  ,class:"nav-link #{ active if controller.action_name == 'show'}"

これって・・・activeを'active'にしてやれば動きませんか？
もしくは

#{controller.action_name == 'show' ? 'active' : ''}

みたいにするとか

Comments

[退会済みユーザー]

TomoyukiTanakaさん、ズバリ的中でした！！
コードが本当にスッキリしました！！ありがとうございます。

Answer 2

方法は色々あると思いますが
viewだけでもできます。
シンプルに

li.nav-item = link_to "action1"  ,action1_path ,class:"nav-link #{active if params[:hoge] == "〇〇(trueにできる値)" }"

みたいな感じでできると思います。

Comments

[退会済みユーザー]

申し訳ございません。params[:hoge]のパラメータを用いるということは、
コントローラの設定も必要ってことでしょうか。文法は分かるのですが、
いまいちhogeの部分がわからず、コメントさせていただきました。
params[:hoge]の[:hoge]は任意のパラメータってことでしょうか？

[glvty83]

コントローラに設定はいらないはずです!
> params[:hoge]の[:hoge]は任意のパラメータってことでしょうか？
そうですね。

該当のviewに飛んできた時にparamsの中にそのページを特定できるparams[:hoge]が入っているはずですので、その値を取得する感じです。

おそらく, params[:action]みたいな感じで判別できそうだと思いますが、念のため、
pryで処理を止めて見て、どのparamsを受け取っているか確認して見ると良いと思います。

Gemfileに
```
gem "pry"
```
を追加して、$ bundle install

該当のviewファイルに
```
- binding.pry ←　ここを追加して、リロードしてください。これにより処理を止めてデバッグすることができます
li.nav-item = link_to "action1" ,action1_path ,class:'nav-link active'
li.nav-item = link_to "action2" ,action2_path ,class:'nav-link'
li.nav-item = link_to "action3" ,action3_path ,class:'nav-link'
```

リロードするとターミナルの中で処理が止まるので、そこで
params
とコマンドを入れてください。

paramsの中身が入ってくるはずなので、その中から特定するのに使えそうな値を探して
params[:hoge]　＝＝ "true"になるようにしてみてください。

[退会済みユーザー]

ありがとうございます！！
pryを使ってパラメータを調べることはできましたが、
うまくslimのコードに落とし込めませんでした。
泥臭くifで分岐分けすると可能なのですが、
クラスを動的に...ってなるとなぜか動きませんでした。難しいですね。