priority_03：サイドナビの修正

■タスク_01 サイドナビのデモサイトを参考にサイドナビの表示・非表示設定を行う http://jillix.github.io/jQuery-sidebar/

■タスク_02 下記の共通レイアウトからサイドナビの部分を削除

サイドナビを設定したいページにそれぞれ記載する。

Caian_app/app/views/layouts/application.html.erb

<% if @current_user %>
<%= render 'layouts/sidebar', {
teams: @teams,
private_room_users: @private_room_users
} %>
<% end %>

■タスク_03 サイドナビが表示されないページはページ全体に内容を表示させるように下記のCSSは削除 Caian_app/app/assets/stylesheets/home.scss

.container {
  position: relative;
  width: auto;
  padding-left: 5px;
  margin: 30px 10px 0px 250px;
  clear: both;
}

■タスク_04 サイドナビを表示されるページへ下記の部分を追加して表示位置を調整する

+ .container {
+   position: relative;
+   width: auto;
+   padding-left: 5px;
+   margin: 30px 10px 0px 250px;
+   clear: both;
+ }

サイドナビについて

サイドナビは画面左側のメニュー部分ですね。今、divタグの中にul>liタグでマークアップされていますが(ulタグはリンク先のコードには見当たりませんでした。liタグは親要素にulまたはolまたはmenuタグを必要としますので、なければ追加が必要です）基本的にナビゲーションには「navタグ」をつけてあげると良いです。（もしくはこの場合はasideタグでも良いです）

例 <nav class="crumbs"> <ul> <li class="crumb"><a href="#">Bikes</a></li> <li class="crumb"><a href="#">BMX</a></li> <li class="crumb">Jump Bike 3000</li> </ul> </nav>

HTMLはなるべくセマンティックな構造になるようにマークアップします。ここでは話が膨大になりますのでセマンティックHTMLに関しては割愛します。セマンティックHTML：https://code-kitchen.dev/tags/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AFHTML/検索botなどに対してだけではなく、アクセシビリティの向上にもつながります（Webはアクセシビリティ込みであってこそWebであると考えます）

aki366 / caian-app

priority_03：サイドナビの修正 #296

サイドナビについて