Chapter 05

ハンバーガーメニューにメニューを追加しよう!

sosa
sosa
2022.09.28に更新
このチャプターの目次

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
    >