このチャプターの目次
v-app-barは2段目のバーです。
しかしハンバーガーメニューをクリックしてもメニューがありません。
App barsのナビゲーションドロワーの切り替えにハンバーガーメニューをクリックするとメニューが表示するサンプルがあるので、それを使います。
サンプルは動作確認もできて、そのコードが右上の<>をクリックすると見れます。
v-cardタグを使うとサンプルのようなカードになってしまうので、必要なv-cardの中の部分をコピペし入れ替えます。具体的にはv-app-barとv-navigation-drawerを以下のものに入れ替えます。
<v-app-bar
color="deep-purple"
dark
>
<v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
>
<v-list
nav
dense
>
<v-list-item-group
v-model="group"
active-class="deep-purple--text text--accent-4"
>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
</v-list-item-icon>
<v-list-item-title>Home</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>Account</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
marginとpadding
動作確認するとv-app-varが重なっています。これは上のv-system-barにapp Propsがあるため最終的にビルドしたときのCSSはposition: fixedになっています。position: fixedとはスクロールしてもバーの位置が固定されています。実際にappがある場合とない場合で確認するとわかると思います。v-app-barにmarginを付ければづらすことができます。marginの基準ですがv-system-barにappのある場合は外枠、appがない場合はv-system-barになります。
marginはclassで指定しclass="mt-4"のようになります。
先頭のmがmargin、paddingの時はp。2文字目は方向を表します。tはtop、bはbottom、lはleft、rはrightです。最後の数字は4pxが1になります。4は4×4pxで16pxです。詳細はSpacing
v-app-barにmarginのクラスm(マージン)t（トップ)-4（4×4px)を追加すると重ならなくなります。
<v-app-bar
class="mt-4"
color="deep-purple"
dark
>