Vuetifyのドロワーでメニューがずれないようにする

#はじめに
Vuetifyで用意されているナビゲーションドロワーのコンポーネントを使用すると、スクロールしたときにドロワー内のメニューもスクロールされてしまい、表示されなくなります。

これを防ぐためにCSSを追加し、メニューをドロワー内で固定しました。

#コード

src/App.vue

<template>
    <v-navigation-drawer
      v-model="drawer"
      absolute
      bottom
      temporary
      style="position:fixed;" // 追加
    >
      <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-title>Foo</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Bar</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Fizz</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-title>Buzz</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
</template>

v-navigation-drawerにstyle="position:fixed;"を追加するだけでメニューが固定されました。

#参考サイト
https://webdesignday.jp/inspiration/technique/css/4166/