前提
Vuetifyのv-navigation-drawerをレスポンシブ対応させたい。
実現したいこと
v-navigation-drawerを画面サイズがスマホサイズになると非表示にし、ハンバーガーメニューにて
表示させる機能を作成したい。(スマホアプリのディスコードのような感じにしたいです。)
発生している問題・エラーメッセージ
現状の状況は、画面がスマホサイズになると表示しない。画面サイズがスマホサイズ以外になると表示するという
切り替えはできているのですが、スマホサイズの時に、表示させることができていないです。
該当のソースコード
<v-navigation-drawer v-if="!$vuetify.breakpoint.xs" v-model="genreDrawer" app width="300" class="drawer" stateless > <v-navigation-drawer v-if="!$vuetify.breakpoint.xs" v-model="genreDrawer" width="70" absolute color="grey lighten-3" mini-variant clipped stateless > </v-navigation-drawer> </v-navigation-drawer>
試したこと
Vuetifyの公式ページのv-navigation-drawerのページの機能を試しました。
https://vuetifyjs.com/ja/api/v-navigation-drawer/#links
v-modelのtrue,falseの切り替え
ご教授よろしくお願いします。
あなたの回答
tips
プレビュー