vue.js サイドバーを作る

サイドバーを作る

参考にしました。
stackoverflow
https://stackoverflow.com/questions/48905654/css-fixed-sidebar-in-vue-js

Vue.jsで使えるテンプレ一覧
https://sounansa.net/archives/2360

↑の一つ
https://www.creative-tim.com/product/vue-light-bootstrap-dashboard#

Vue Plugin Component
https://gist.github.com/davewoodall/c8bc710fc258268c29617473be47d2c0

サイドバーのコンポーネントを作る

ファイル名は、 sidebar.vue

パスは app/javascript/packs/components/layouts/sidebar.vue とする

土台のコンポーネント(scafold.vueとする)を作り、1をimportする

scafold.vue

<script>
import Top from './top.vue' // ヘッダー
import Bottom from './bottom.vue' // フッター
import Welcome from '../welcome.vue' // トップページのコンテンツ
import Sidebar from './sidebar.vue' // サイドバー

export default {
  components: {
    Top,
    Bottom,
    Welcome,
    Sidebar
  },
}
</script>

2のtemplate内で1を使用

ポイントは、
サイドバーのコンポーネントと、メインコンテンツ(router-view)のコンポーネントを、別々の要素として配置させること。

scafold.vue

<template>
  <div>
    <top></top>
    <sidebar class="sidebar-area"></sidebar>
    <div class="scafold-wrapper text-center">
      <router-view/>
    </div>
    <bottom class="footer-area"></bottom>
  </div>
</template>

2にcssを適用

scafold.vue

<style scoped>
.sidebar-area {
  /* 左側に固定 */
  float: left;
}

.footer-area {
  margin-top: 40px;
}

.scafold-wrapper {
  /* display: flex; 要素を横並びにする */
  flex-direction: column; /* 要素の並び順の主軸を指定 上 => 下 */
  min-height: 100vh; /* 要素の高さの最小値を指定 vhはviewport(表示領域) heightの略 */

  /* サイドバーのwidth分だけ範囲を削除 */
  width: calc(100% - 200px);

  /* サイドバーで隠れるので右に寄せる */
  margin: 0 0 0 180px;
}
</style>

1のサイドバーのコンポーネントを実装

sidebar.vue

<template>
  <div class="sidebar">
    <div class="sidebar-wrapper">
      <div class="sidebar-link-area">
        <!-- サイドバーメニュー -->
        <p><router-link to="/counselings" class="sidebar-link">カウンセリング</router-link></p>
        <p><router-link to="/expenses" class="sidebar-link">経費</router-link></p>
        <p><router-link to="/problems" class="sidebar-link">悩み</router-link></p>
        <p><router-link to="/calendars" class="sidebar-link">カレンダー</router-link></p>
        <p><router-link to="/admins" class="sidebar-link">管理者</router-link></p>
        <p><router-link to="/users" class="sidebar-link">生徒一覧</router-link></p>
        <p><router-link to="/tasks" class="sidebar-link">イベント一覧</router-link></p>
      </div>
    </div>
  </div>
</template>

<style>
.sidebar {
  background-color: #191970;
  height: 100%; /* サイドバーの高さ */
  width: 200px; /* サイドバーのwidthを指定 */
  max-width: 200px; /* widthの最大値 */
  opacity: 0.9.5; /* 透過する 0に近くほど透過する */
  position: fixed; /* 左上に要素を固定する(スクロールしても位置は固定される) */
  overflow-x: hidden; /* 横軸ではみ出た要素を非表示にする */
  box-sizing: border-box; /* paddingとborderを、widthとheightに含める */
  padding-left: 40px; /* サイドバー内のリンクの位置を右にずらす */
}

.sidebar-link-area {
  padding-top: 20px; /* サイドバーリンクの上部に空白を作る */
}

.sidebar-link {
  color: #ffffff; /* リンクの文字色を白に */
}

.sidebar-link:hover {
  color: #ffffff /* マウスがリンクに乗った時も文字色を白に */
}
</style>