I have been working on setting up a responsive Vuetify app bar for my Vue.js project. When the website is viewed on a mobile screen, the navigation links are displayed in a 3-dot drop down menu.
<v-app>
<v-app-bar color="indigo" dark fixed app>
<v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text to="create">
<span class="mr-2" v-if="activeUser">Create Post</span>
</v-btn>
<v-btn text to="/">
<span class="mr-2" v-if="activeUser">All Posts</span>
</v-btn>
</v-toolbar-items>
<v-menu class="hidden-md-and-up">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="activeUser" to="create">
<v-list-item-title>Create Post</v-list-item-title>
</v-list-item>
<v-list-item v-if="activeUser" to="/">
<v-list-item-title>All Posts</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<router-view></router-view>
</v-content>
</v-app>
My issue is that the 3-dot button appears in both full screen and mobile views. I specifically want it to show only in the mobile view. I tried wrapping the button inside the v-toolbar-items tags, but that didn't solve the problem. Does anyone have any suggestions on how to configure the app bar so that the 3-dot button is visible only in the mobile view? Thank you!