はじめに、、、

今回はrailsで↓みたいな感じにslackのサイドバーを作ります
今回の例は自分の作っているLINEみたいな感じのチャットツールのアドミン画面を作りました。

まずはコードから

application.html.erb


〜省略〜

<body>
  <div class="row">
    <div class="col-2">
      <%= render'layouts/sidebar' %>
    </div>
    <div class="col-8">
      <%= yield %>
    </div>
</body>

_sidebar.html.erb

<div class="listings">
  <div class="listings_channels">
    <h2 class="listings_header">admin</h2>
    <ul class="channel_list">
      <%= sidebar_link_item('user一覧', admin_users_path) %>
      <%= sidebar_link_item('ルーム一覧', admin_rooms_path) %>
      <%= sidebar_link_item('不適切ワード一覧', admin_inappropriate_words_path %>
    </ul>
  </div>
</div>

application_helper.rb

module ApplicationHelper
  def sidebar_link_item(name, path)
    class_name = 'channel'
    class_name << ' active' if current_page?(path)

    content_tag :li, class:class_name do
      link_to name, path, class: 'channel_name'
    end
  end
end

application.scss

.channel-menu {
  position: fixed;
  top: 0;
  @media screen and (max-width: 600px) {
    position: inherit;
    margin-left: 0;
  }
}

.channel-menu_name {
  display: inline-block;
  padding: 0 0.5rem 0 1.5rem;
  color: #555459;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 53px;
  cursor: pointer;
  @media screen and (max-width: 600px) {
    padding-left: 0;
  }
}
.channel_name .prefix {
  margin-right: 8px;
}

.channel-menu_prefix {
  padding-right: 0.5rem;
  font-weight: 500;
}
.channel-menu_date {
  font-weight: bold;
}
.channel-menu h3 {
  float: right;
  padding-right: 0.1rem;
  font-weight: 500;
}
.listings {
  min-height: 100vh;
  height: 100%;
  width: 220px;
  float: left;
  color: #ab9ba9;
  background-color: #4d394b;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  @media screen and (max-width: 600px) {
    display: none;
    position: absolute;
    &.show {
      display: block;
    }
  }
}

.listings_channels {
  margin: 1rem 0 2rem;
}

.listings_header {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.25rem;
  margin: 0 1rem 0.1rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #ab9ba9;
  width: 165px;
  position: relative;
}

.channel_list {
  padding: 0;
  list-style-type: none;
  text-align: left;
  color: #ab9ba9;
}

.channel {
  height: 24px;
  line-height: 24px;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  padding-right: 17px;
  color: #ffffff;
  padding-left: 1rem;
  a {
    color: #ddd;
    text-decoration: none;
    width: 100%;
    display: inline-block;
  }
  a:hover {
    color: #eee;
  }
}

.channel.active {
  background: #4c9689;
}

解説

application.html.erb


〜省略〜

<body>
  <div class="row">
    <div class="col-2">
      <%= render'layouts/sidebar' %>
    </div>
    <div class="col-8">
      <%= yield %>
    </div>
</body>

サイドバーは全てのページに存在していて欲しかったので
application.html.hamlに部分テンプレートとして組み込みました

_sidebar.html.erb

<div class="listings">
  <div class="listings_channels">
    <h2 class="listings_header">admin</h2>
    <ul class="channel_list">
      <%= sidebar_link_item('user一覧', admin_users_path) %>
      <%= sidebar_link_item('ルーム一覧', admin_rooms_path) %>
      <%= sidebar_link_item('不適切ワード一覧', admin_inappropriate_words_path %>
    </ul>
  </div>
</div>

今回は、現在表示しているlink箇所に色をつけたかったので
ヘルパーメソッドを作成しそのメソッドを呼んでいます

app/helpers/application_helper.rb

module ApplicationHelper
  def sidebar_link_item(name, path)
    class_name = 'channel'
    class_name << ' active' if current_page?(path)

    content_tag :li, class:class_name do
      link_to name, path, class: 'channel_name'
    end
  end
end

まず sidebar_link_item の第一引数には「表示名」第二引数には「path」を渡すようにしています。
そして、現在表示しているlink箇所に色をつけたかったので、 class_name という変数を作成し
if文で 第二引数で受けっとったpath と 現在いるpath を比較して合致した場合は
class_name という変数に activeという文字列を加えています。

この時に current_page?(path)
というメソッドを使っており、これは引き数のpathと現在いるpathが等しければtrueを返しそうでなければfolseを返してくれるものです。

そして最後に
content_tag というhtmlのタグを動的に生成してくれるrailsのヘルパーメソッドを使いhtmlを返しています。

参考文献

current_page?リファレンス
 content_tagリファレンス
 slackのコードペン