title: v-navigation-drawer and v-app-bar don't work as intended
body: <p>I have made a simple app bar and navigation drawer page. But my <code>v-navigation-drawer</code> component doesn't seem to be placed under my <code>v-app-bar</code> component. The official  <a href="https://vuetifyjs.com/en/components/application/" rel="noreferrer">vuetify documentation</a> on the <code>v-app</code> component makes it clear that this shouldn't be this way (<a href="https://cdn.vuetifyjs.com/images/layouts/app.png" rel="noreferrer">How it should be</a>). <a href="https://i.stack.imgur.com/EeVbJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EeVbJ.png" alt="example of current state" /></a></p>
  <p>My goal is to use the official layout because it is prettier than what I have now. I have tried using numerous props on both the <code>v-app-bar</code> and <code>v-navigation-drawer</code> component, but I can't seem to get it to work.</p>
  <p><em><strong>EDIT</strong></em>:
  My code is loaded as a <code>component</code> in my main <code>App.vue</code></p>
  <p>My current code:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-app-bar app clipped-leftS flat dark&gt;
        &lt;v-toolbar-title&gt;
          &lt;span class=&quot;first-word font uppercase&quot;&gt;hi&lt;/span&gt;
          &lt;span class=&quot;second-word font uppercase&quot;&gt;stackoverflow&lt;/span&gt;
        &lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
      &lt;/v-app-bar&gt;
  
      &lt;v-navigation-drawer app flat dark mini-variant permanent expand-on-hover&gt;
        &lt;v-list&gt;
          &lt;v-list-item class=&quot;px-2&quot;&gt;
            &lt;v-list-item-avatar&gt;
              &lt;v-img src=&quot;https://randomuser.me/api/portraits/men/11.jpg&quot;&gt;&lt;/v-img&gt;
            &lt;/v-list-item-avatar&gt;
  
            &lt;v-list-item-title&gt;John Doe&lt;/v-list-item-title&gt;
          &lt;/v-list-item&gt;
          &lt;v-list-item v-for=&quot;item in navbarlist&quot; :key=&quot;item.route&quot; :to=&quot;item.route&quot;&gt;
            &lt;v-list-item-icon&gt;
              &lt;v-icon&gt;{{ item.icon }}&lt;/v-icon&gt;
            &lt;/v-list-item-icon&gt;
            &lt;v-list-item-content&gt;{{ item.text }}&lt;/v-list-item-content&gt;
          &lt;/v-list-item&gt;
        &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: () =&gt; ({
      navbarlist: [
        { icon: &quot;mdi-view-dashboard&quot;, text: &quot;Dashboard&quot;, route: &quot;/&quot; },
        { icon: &quot;mdi-upload&quot;, text: &quot;Upload&quot;, route: &quot;/upload&quot; },
      ],
    }),
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  .font {
    font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen,
      Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .first-word {
    font-weight: 400;
  }
  .second-word {
    font-weight: 200;
    color: grey;
  }
  .item-tile-icon {
    color: black;
  }
  &lt;/style&gt;
  </code></pre>