LoginSignup
5
1

More than 1 year has passed since last update.

【Rails】サイドバーメニューをアクティブにする

Posted at

完成イメージ図

サイドバーにカーソルを合わせると、バーが広がるようboostrapを用いて実装する。
このデザインはここを参考に作成した者なので、細かいのはここで参照。
Image from Gyazo

実装

アプリケーションヘルパーにて、現在のコントローラーが例えばadmin/boards pathと一致しているときは、activeを返すよう定義する。
定義するとclass: "nav-link active"となるので、アクティブになる。

application_helper.rb
def active_if(path)
  path == controller_path ? 'active' : ''
            #条件式 ? 条件が正しいときの値 : 条件が間違っているときの値
end
sidebar.html.rb
#省略
<li>
 <%= link_to admin_boards_path, class: "nav-link #{active_if('admin/boards')}" do %>
   <i class="nav-icon far fa-file"></i>
     <p>
       <%= "掲示板"%>
     </p>
 <% end %>
</li>

<li>  
 <%= link_to admin_users_path, class: "nav-link #{active_if('admin/users')}" do %>
   <i class="nav-icon far fa-user"></i>
     <p>
        <%="ユーザー"%>
     </p>
 <% end %>
</li>

参考記事

サイドメニューのアクティブ・非アクティブ化

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1