如何为我的vuetify应用程序设计响应式导航栏

Question

Vuetify V2.1.9Cant使用vuetify开发响应式导航栏设计。虽然我尝试使用以下代码进行编码，但我无法开发响应式导航栏设计。它不起作用。如果你能修复代码，那将很有帮助。提前谢谢。有一个愉快的编码。我的要求就像一个正常的导航栏。当我在手机上打开页面时，它应该隐藏菜单并显示汉堡菜单。

<v-navigation-drawer v-model="sideNav" absolute temporary>
<v-list-item-content class="hidden-sm-and-up">
<v-list dense>
<v-list-item v-for="item in guestNav" :key="item.name" link>
<v-list-item-icon>
<v-icon>mdi-user</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-list-item-content>
</v-navigation-drawer>
<v-toolbar color="#00A972" dark height="50px">
<v-spacer></v-spacer>
<v-toolbar-title>
<h5 style="font-weight: 500;">Projects</h5>
</v-toolbar-title>
<v-app-bar-nav-icon @click.native="sideNav = !sideNav" class="hidden-sm-and-up"></v-app-bar-nav-icon>
<div class="flex-grow-1"></div>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-up">
<v-row justify="center">
<v-btn
text
:ripple="false"
color="white"
style="margin-top:7px;margin-right:20px;font-weight:400"
>HOME</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-row justify="center">
<v-btn
text
:ripple="false"
color="white"
style="margin-top:7px;margin-right:20px;font-weight:400"
>STORE</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-row justify="center">
<v-btn
text
:ripple="false"
color="white"
style="margin-top:7px;margin-right:20px;font-weight:400"
>WALLET</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-row justify="center">
<v-btn
text
:ripple="false"
color
style="margin-top:7px;margin-right:20px;font-weight:400"
>LOG IN</v-btn>
<v-btn
text
:ripple="false"
class="green"
dark
style="margin-top:7px;margin-right:20px;font-weight:400;background-color: #38B98A!important;"
>SIGN UP</v-btn>
<v-spacer></v-spacer>
</v-row>
</v-toolbar-items>
</v-toolbar>

Answer 1

使用媒体查询使导航栏响应如下

@仅媒体屏幕和(最大宽度：768px({.nav_item{显示：没有！重要；｝｝