rails로 slack 같은 사이드바를 만들어 보자

소개,,,,

이번에는 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>

이번에는 현재 표시하고있는 링크 부분에 색을 붙이고 싶었기 때문에
도우미 메서드를 만들고 메서드를 호출합니다.

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 의 제 1 인수에는 「표시명」 제 2 인수에는 「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 참조
슬랙 코드 펜

Reference

이 문제에 관하여(rails로 slack 같은 사이드바를 만들어 보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/takehanKosuke/items/f4f2e49e84576a555ee6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다