Posted at

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


仕様:

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