Vueとbulmaでサイドメニューを作る

9233 ワード
Bulma Vue.js Vue.js テキストリンク

仕様:

SideMenu.vueというファイル名で定義する。

見た目はこの形：

また、各メニューリンクを押すと色が変わる。

準備

注意:vue-cliで作成したプロジェクトでの仕様を前提とする

必要npmをインストール。

$ npm install bulma
$ npm install font-awesome

サイドメニューの実装

vueファイル(SideMenu.vue)。コード内のmenu-listがメニューの主要クラスで、この中にliで要素を定義するとそれぞれがメニューの項目になる。

また、changeActiveLinkメソッドをクリック時に発動させることで、各メニュー項目が押されたらそれに対してis-active'を設定することでアクティブ時の色に変更する。

SideMenu.vue
<template>
  <aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile has-background-dark">
    <p class="menu-label is-hidden-touch has-text-white">Navigation</p>
    <ul class="menu-list">
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 0 }" @click="changeActiveLink(0)">
          <span class="icon"><i class="fa fa-home"></i></span> Home
        </a>
      </li>
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 1 }" @click="changeActiveLink(1)">
          <span class="icon"><i class="fa fa-book"></i></span> Other
        </a>
        <ul>
          <li>
            <a href="#" :class="{ 'is-active': activeNum == 10 }" @click="changeActiveLink(10)">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Twitter
            </a>
          </li>
          <li>
            <a href="#" :class="{ 'is-active': activeNum == 11 }" @click="changeActiveLink(11)">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Qiita
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 13 }" @click="changeActiveLink(13)">
          <span class="icon"><i class="fa fa-info"></i></span> About
        </a>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  data () {
    return {
      activeNum: 0
    }
  },
  methods: {
    changeActiveLink (n) {
      this.activeNum = n
    }
  }
}
</script>

こちらのサイドバーを以下App.js内で参照する。
route-view部分はメインコンテンツですが、本題ではないので任意の要素に置き換えて大丈夫です。

App.vue
<template>
  <div id="app">
    <div class="main-content columns is-fullheight">
      <side-menu/>
      <div class="container column is-10">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import SideMenu from '@/components/SideMenu'

export default {
  name: 'app',
  components: {
    SideMenu
  }
}
</script>

<style lang="sass">

// サイドメニューの色設定
$menu-item-active-background-color: hsl(171, 100%, 41%);
$menu-item-color: hsl(0, 0%, 100%);

@import '~bulma';
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';

</style>

本質的な部分だけコード化するために、マジックナンバーが入っていたりとリファクタリングすべき部分が残っているので、適宜読みやすいよう修正をお願いします。

参考

menuデザインの参考元:
Bulma sidebar

白駿3980号:選抜リスト-Swift
PAT甲級1007 Maximum Subsequence Sum(オンライン処理アルゴリズム最適化)