title: How to build a responsive Vuetify app bar
body: <p>I am attempting to set up a responsive Vuetify app bar in a Vue.js project. The navigation links are rendered in a 3-dot drop down menu when viewed on a mobile screen. </p>
  
  <pre><code>&lt;v-app&gt;
      &lt;v-app-bar color="indigo" dark fixed app&gt;
        &lt;v-toolbar-title&gt;Toolbar Mobile Menu&lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-toolbar-items class="hidden-sm-and-down"&gt;
          &lt;v-btn text to="create"&gt;
            &lt;span class="mr-2" v-if="activeUser"&gt;Create Post&lt;/span&gt;
          &lt;/v-btn&gt;
          &lt;v-btn text to="/"&gt;
            &lt;span class="mr-2" v-if="activeUser"&gt;All Posts&lt;/span&gt;
          &lt;/v-btn&gt;
        &lt;/v-toolbar-items&gt;
  
        &lt;v-menu class="hidden-md-and-up"&gt;
          &lt;template v-slot:activator="{ on }"&gt;
            &lt;v-btn icon v-on="on"&gt;
              &lt;v-icon&gt;mdi-dots-vertical&lt;/v-icon&gt;
            &lt;/v-btn&gt;
          &lt;/template&gt;
  
          &lt;v-list&gt;
            &lt;v-list-item v-if="activeUser" to="create"&gt;
              &lt;v-list-item-title&gt;Create Post&lt;/v-list-item-title&gt;
            &lt;/v-list-item&gt;
            &lt;v-list-item v-if="activeUser" to="/"&gt;
              &lt;v-list-item-title&gt;All Posts&lt;/v-list-item-title&gt;
            &lt;/v-list-item&gt;
          &lt;/v-list&gt;
        &lt;/v-menu&gt;
      &lt;/v-app-bar&gt;
      &lt;v-content&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;
  
  </code></pre>
  
  <p>The problem is that the 3-dot button renders in both full screen and mobile. I of course want that button to by visible only in mobile. To fix this, I attempted to nest the button inside the <code>v-toolbar-items</code> tags, but that also did not work. Any recommendations on how to configure this app bar to display the 3-dots button only in mobile view? Thanks!</p>