Vue2 × Vuetifyでトップバーとサイドバーを表示させてみた

## はじめに
Vue.jsのフレームワークであるVuetifyを用いて、ホームページに使うようなトップページとサイドバーを表示させてみました。
大まかな流れは以下のとおりです．

1. Vueアプリケーションの作成、Vuetifyの追加
1. トップバーの設置
1. ロゴの設置・文字の表示
1. サインアウトボタンの設置
1. サイドバーの設置
1. サイドバーの開閉
1. サイドバーにアイコンの表示
1. サイドバーからクリックで画面遷移

## 開発環境
- Windows 11
- Vue CLI 5.0.8
- Vue 2.7.14
- npm 6.14.14
- Node.js 14.17.5


## 実装
### Vueアプリケーションの作成、Vuetifyの追加
以下のコマンドを実行してVueアプリケーションを作成します。

```:ターミナル
vue create フォルダ名
```
フォルダ名は任意です。

Vueアプリケーションが作成できたら、以下のコマンドを実行して、Vuetifyを追加します。
```:ターミナル
vue add vuetify
```
途中でプリセットの選択を聞かれるので、Default(recommended)を選択します。

Vuetify追加後、以下のコマンドを実行してみてください。
```:ターミナル
npm run serve
```
![screencapture-localhost-8080-2023-02-18-14_15_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/7bff4618-7ac0-b7a3-a9a7-3efe8d08b6a9.png)

無事、Vuetifyが追加できています。

デフォルトで作成されるファイルのうち、今回は主にApp.vueを変更していきます。
まずは、App.vueを以下のように変更してください。
```App.vue
<template>
  <v-app>
  </v-app>
</template>
```

### トップバーの設置
まずはトップバーを設置します。
v-app-barタグでトップバーを追加することができます。

```App.vue
<template>
  <v-app>
    <v-app-bar
      app
      dark
      clippedLeft
      :height="60"
    >
　　</v-app-bar>
  </v-app>
</template>
```
appは、高さをいい感じに自動調整してくれます。
darkは、バーの色をdarkにします。
clippedLeftは、左に固定します。
:height="60"は、数字を変更することで高さを調節します。

ここまで完成すると以下のようになります。

![screencapture-localhost-8080-2023-02-18-14_42_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/f68f61c4-e80f-b072-227d-d93c2527ec40.png)


### ロゴの設置・文字の表示
v-imgタグで画像の表示ができます。
今回はv-spacerタグでスペースを空けて、左端にロゴ、右端に仮のアカウント名を表示させています。

```App.vue
<template>
  <v-app>
    <v-app-bar
     <!--省略-->
    >
    <v-img 
        src="./assets/logo_test.png"
        max-height="90%"
        max-width="130"
        class="mr-3"
      ></v-img>
    <v-spacer></v-spacer>
    <p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
    </v-app-bar>
  </v-app>
</template>
```
srcは、画像へのパスです。
max-heightで最大の高さ、max-widthで最大の幅を指定します。
mrはmargin-reft、mbはmargin-bottomのことです。

ここまで完成すると以下のようになります。
![screencapture-localhost-8080-2023-02-18-14_47_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/1c68518b-3361-b43f-f143-25ae36fef6b2.png)

### サインアウトボタンの設置
次にアカウント名の横にサインアウトボタンを配置します。
v-btnでボタンを配置することができます。
```App.vue
<template>
  <v-app>
    <!--省略-->
    >
    <v-img 
     <!--省略-->
    ></v-img>
    <v-spacer></v-spacer>
    <p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
    <v-btn 
      color="blue"
    >
      サインアウト
    </v-btn>
    </v-app-bar>
  </v-app>
</template>
```
colorで色を指定することができます。
今回はblueです。

ここまで完成すると以下のようになります。
![screencapture-localhost-8080-2023-02-18-14_53_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/6345ea6e-fad9-4f08-fb7e-88dc895354a6.png)

### サイドバーの設置
v-navigation-drawerタグでサイドバーを描画できます。
その中にv-listタグでリストを作成し、v-list-itemでitemを追加します。
今回はトップページとアカウントのメニューを作成しています。
```App.vue
<template>
  <v-app>
    <v-app-bar
 　　 <!--省略-->
    >
    <v-img 
     <!--省略-->
      ></v-img>
    <v-spacer></v-spacer>
    <p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
    <v-btn 
      color="blue"
    >
      サインアウト
    </v-btn>
    </v-app-bar>
    <v-navigation-drawer
      app
      dark
      clipped
      :width="200"
    >
      <v-list
        nav
        dense
      >
       <v-list-item>
          <v-list-item-title>トップページ</v-list-item-title>
        </v-list-item>
        <v-list-item>
        <v-list-item-title>アカウント</v-list-item-title>
      </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</template>
```
ここまで完成すると以下のようになります。
![screencapture-localhost-8080-2023-02-18-15_57_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/749397a8-abe2-ad6b-065f-ef2fe19e2650.png)

### サイドバーの開閉
まず、開閉に利用するハンバーガーメニューボタンを追加します。
v-app-bar-nav-iconタグでハンバーガーメニューを描画できます。
@click="drawer = !drawer"でクリックしたときの開閉を制御します。

v-navigation-drawerタグに
:value="$vuetify.breakpoint.mdAndDown? drawer : true"
:expand-on-hover="$vuetify.breakpoint.lgAndUp && drawer"
の2行を追加します。

また、scriptタグ内にもコードを加えます。

```App.vue
<template>
 <v-app>
    <v-app-bar
 　　 <!--省略-->
    >
      <v-app-bar-nav-icon
        @click="drawer = !drawer"
      >
      </v-app-bar-nav-icon>
      <v-img 
       <!--省略-->
      ></v-img>
      <v-spacer></v-spacer>
        <p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
        <v-btn 
          color="blue"
        >
        サインアウト
        </v-btn>
    </v-app-bar>
    <v-navigation-drawer
      app
      dark
      clipped
      :width="200"
      :value="$vuetify.breakpoint.mdAndDown? drawer : true"
      :expand-on-hover="$vuetify.breakpoint.lgAndUp && drawer"
    >
      <v-list
        nav
        dense
      >
       <v-list-item>
         <v-list-item-title>トップページ</v-list-item-title>
       </v-list-item>
       <v-list-item>
         <v-list-item-title>アカウント</v-list-item-title>
      </v-list-item>
     </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      drawer:this.$vuetify.breakpoint.lgAndUp,
    }
  },
}
</script>
```
### サイドバーにアイコンの表示
まず、以下のコマンドでVuetifyのIcon Fontsをインストールします。

```:ターミナル
npm install @mdi/font -D
```

次にvuetify.jsに
import '@mdi/font/css/materialdesignicons.css'
を追加してmdi/fontをインポートします。

```vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import '@mdi/font/css/materialdesignicons.css'; //追加

Vue.use(Vuetify);

export default new Vuetify({
});
```

次に先ほど追加したv-list-itemの中にアイコンを追加します。
以下のように書き換えるとアイコンを追加することができます。

```App.vue
<template>
  <v-app>
    <v-app-bar
     <!--省略-->
    >
    <v-app-bar-nav-icon
        @click="drawer = !drawer"
    >
    </v-app-bar-nav-icon>
    <v-img 
     <!--省略-->
      ></v-img>
    <v-spacer></v-spacer>
    <p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
    <v-btn 
      color="blue"
    >
      サインアウト
    </v-btn>
    </v-app-bar>
    <v-navigation-drawer
      <!--省略-->
    >
    <v-list
        nav
        dense
    >
      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-home</v-icon>
        </v-list-item-icon>
        <v-list-item-title>トップページ</v-list-item-title>
      </v-list-item>

      <v-list-item>
        <v-list-item-icon>
          <v-icon>mdi-account</v-icon>
        </v-list-item-icon>
        <v-list-item-title>アカウント</v-list-item-title>
      </v-list-item>
    </v-list>
    </v-navigation-drawer>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      drawer:this.$vuetify.breakpoint.lgAndUp,
    }
  },
}
</script>
```
ここまで完成すると以下のようになります。
![screencapture-localhost-8080-2023-02-18-16_35_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/0e8230e4-e0b0-fd3c-93e2-e825e505654f.png)

### サイドバーからクリックで画面遷移
画面遷移にはrouterを用いるので以下のコマンドでインストールします。
```:ターミナル
npm install vue-router
```


次に、画面遷移先のAccount.vueをcomponentsフォルダ内に作成します。
Account.vueの中身は以下のとおりです。
```Account.vue
<template>
    <v-app> 
      <div>
        <p>アカウントのページです。</p>
      </div>
    </v-app>
</template>
```

次にrouter.jsを作成します。
routerフォルダをsrc内に新規作成し、その中にrouter.jsファイルを作成し、中身を以下のようにします。
```router.js
import Vue from "vue";
import Router from "vue-router";
import Home from '../components/HelloWorld.vue'
import Account from '../components/Account.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/account', component: Account },
  ]
})
```
次に、main.jsを以下のように編集します。
```main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router/router' //追加

Vue.config.productionTip = false

new Vue({
  vuetify,
  router, //追加
  render: h => h(App)
}).$mount('#app')

```

そして、router-viewタグをApp.vueに追加します。

```App.vue
<template>
<template>
  <v-app>
    <v-app-bar
     <!--省略-->
    >
    <v-app-bar-nav-icon
        @click="drawer = !drawer"
    >
    </v-app-bar-nav-icon>
    <v-img 
     <!--省略-->
      ></v-img>
    <v-spacer></v-spacer>
    <p class="mb-0 mr-2">XXXXXXX@XXX.com</p>
    <v-btn 
      color="blue"
    >
      サインアウト
    </v-btn>
    </v-app-bar>
    <v-navigation-drawer
     <!--省略-->
    >
    <v-list
        nav
        dense
    >
     <!--省略-->
    </v-list>
    </v-navigation-drawer>
    <router-view/> <!--追加-->
  </v-app>
</template>

<script>
export default {
  data () {
    return {
      drawer:this.$vuetify.breakpoint.lgAndUp,
    }
  },
}
</script>
```
ここまで完成すると、サイドバーのアカウントをクリックすると、アカウントのページに遷移することができます。
![screencapture-localhost-8080-account-2023-02-21-16_18_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/7594e7bb-6822-0523-e76b-4458a6080ad1.png)

## まとめ
今回は、Vuetifyでトップバーとサイドバーを表示させてみました。
いろいろなパーツがあらかじめ用意されているのは非常に便利ですよね。
使いこなせるようになるためにも、引き続き触っていきたいと思います！