Vue.jsでBulmaのナビゲーションバー（Navbar）をスマホでトグル対応（ヘッダー）

BulmaのNavbarはそのままだとモバイルのトグル対応していない

UIフレームワークのBulmaですが、ナビゲーションバー（Navbar）がレスポンシブデザインとなっており、スマホ画面などモバイルだとメニューが隠れてクリックするタイプになります。

ですが、サンプルコードをそのまま写してデプロイをしてスマホで試しても反応しません。

これは、スマホの対応は各自で設定する必要があるからです。

（このトグル（Toggle）がスマホだと反応してくれない。）

そこでVue.jsでスマホ対応させるための方法とコードを紹介します。

解決策：クラスバインディングさせる

結論から言うと、Vue.jsなら「クラスバインディング」を使えば簡単にトグルメニューを実装することができます。

クラスバインディングとは？

クラスバインディングは、「class」要素をアクティブにしたりデータに応じて動的に変更させることができるVue.jsの機能です。

クラスとスタイルのバインディング — Vue.js

今回の方法では、対応するクラスを最初は「false」にしておいて画面に表示しないようにしておき、スマホ画面でトグルメニューをクリックしたらクラスが「true」となってアクティブになり表示されるように設定すれば良いのです。 

実際のNavbarのサンプルコード

Vue.jsでBulmaのナビゲーションバーをスマホでも対応させるサンプルコードです。

ポイントは

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" v-bind:class="{ 'is-active': menuActive }" @click="menuToggle()" data-target="navbarBasicExample">

 の部分でクラスバインディングとクリックボタンをつけている点です。このようにすることで、「menuToggle()」で「false」と「true」を入れ替えています。 

    methods:{
        menuToggle(){
            this.menuActive = !this.menuActive;
        },
    }

template部分はもう一箇所の変更必要です。

<div id="navbarBasicExample" class="navbar-menu" v-bind:class="{ 'is-active': menuActive }">

こちらも同じくクラスバインディングしているのでクリックで開いたり閉じたりします。

要約すると、BulmaのナブバーのトグルをVue.jsで対応させるには以下の部分を加えるだけです。

• template内の二箇所を上記のように変更
• dataに「menuActive:false」を追加
• methodsにmenuToggle()を設定

非常に簡単に実装できていることがわかっていただけたと思います。

おまけ：watchは何をしているのか？ 

おまけですが、今回のサンプルではwatchにメソッドを一つ加えています。

   watch:{
        '$route' () {
            this.menuActive = false
        }
    },

これは無くても良いんですが、もし「watch」をつけないと、Vue-routerで画面が遷移した後でも「is-active」は「true」のままでトグルが閉じてくれません。

ユーザー体験的に良くないかなと思ったので、watchでVue-routerの動きを検知してもしrouterの遷移があったらトグルを閉じるように設定しました。

お好みでお使いください。