0

他質問サイトでも同様の質問をしています。解決した場合はそちらも更新します。よろしくお願いします。

前提・実現したいこと

rails、bootstrapでメニューバーを作成しています。
現在表示しているページのリンクを自動でアクティブな状態にしたいです。

発生している問題・エラーメッセージ

アクティブな状態が実装できません。
以下記事を参考に作成しました。
サイドメニューのアクティブ・非アクティブ化

イメージ説明

該当のソースコード

app/helpers/application_helper.rb

module ApplicationHelper
(省略)
  def active_if(path)
    path == controller_path ? 'active' : ''
  end
end
app/views/users/_sidebar.html.erb

<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-light">
  <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
    <ul class="nav nav-pills nav-fill flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
      <li class="nav-item">

<!-- 該当のコード -->
        <%= link_to mypage_path, class: "nav-link align-middle px-0 #{active_if('mypage')}" do %>
          <i class="fa-solid fa-house"></i><span class="ms-1 d-none d-sm-inline">マイページ</span>
        <% end %>
      </li>
      <li class="nav-item">
        <%= link_to profile_path, class: "nav-link align-middle px-0 #{active_if('profile')}" do %>
          <i class="fa-solid fa-user"></i><span class="ms-1 d-none d-sm-inline">プロフィール</span>
        <% end %>
      </li>
    </ul>
  </div>
</div>
routes.rb

Rails.application.routes.draw do
  get 'mypage', to: 'users#mypage'
(省略)
  resource :profile
(省略)
end

試したこと

classに手動でactiveを付与するとアクティブな状態になるため、
ヘルパーに問題があると思いますが、
参考記事と同じコードを使用しているのに実装できない原因がわかりません。
恐れ入りますがよろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

ruby: 3.0.2
rails: 6.0.4
Bootstrap: 5.0

1 件の回答 1

0

get 'mypage', to: 'users#mypage'というroutesの場合/mypageの時controller_pathusersを返すのでclass: "nav-link align-middle px-0 #{active_if('users')}"だとactiveが付与されると思います。

こう言った時はbinding.pryで覗いてみるとすぐ問題点がわかります。

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

本題とはそれますがコントローラーだけで判断するのは余計な時にもactiveがついちゃいそうなので、私は以前、こんな感じのヘルパーを作ったことがあります。

def current_page?(arg)
  arg.keys.all? {|key| params[key] == arg[key] }
end

使う時はこんな感じ

current_page?(controller: 'users', action: 'mypage')

(このコード動かしてないのでダメだったら適当に修正お願いします)

あと、手前味噌ですがHTMLのclassを動的に付与する場合classnames-rails-viewを使うと便利ですよ。jsで有名なclassnamesのマネですけど。

これを使えばこんな感じになります。

<%= link_to mypage_path, class: class_names('nav-link align-middle px-0', 'active': current_page?(controller: 'users', action: 'mypage')) do %>
  <i class="fa-solid fa-house"></i><span class="ms-1 d-none d-sm-inline">マイページ</span>
<% end %>
3
  • 返信が遅くなってしまい申し訳ございません!頂いた回答で無事実装することができました。ご丁寧に教えていただき有難うございました! せっかくですので追加で教えていただいた以下コードもマスターしたいのですが、 エラーが生じましたのでよろしければ解説をお願いしたいです。 ` def current_page?(arg) arg.keys.all? {|key| params[key] == arg[key] } end `
    – edsr
    2022年3月22日 2:38
  • 発生したエラー: undefined method 'keys' for "/":String(NoMethodError) ビューから受け取った引数{:controller=>"users", :action=>"mypage”}keys.all?メソッドでハッシュに含まれるキーの一覧を配列として取得、配列の中の値が表示しているビューと全て合っていれば{|key| params[key] == arg[key] }、trueを返しクラスにactiveを付与するヘルパーだと解釈したのですが、合っていますでしょうか? また、わからない点がありまして、ハッシュのvalueではなくkeyを取得する理由は何でしょうか?ハッシュのキーはcontrollerとactionなので全てのビューで一致してしまうのではないかと思いました。 お手数おかけします。
    – edsr
    2022年3月22日 2:40
  • 読みづらいコメント申し訳ございません💦
    – edsr
    2022年3月22日 2:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。