title: Vuetify: My navigation drawer is positioned over another element (toolbar)
body: <p><strong>I would like to put my navigation drawer under the toolbar.</strong></p>
  <p>I'm trying to achieve something like this :</p>
  <p><a href="https://i.stack.imgur.com/fLWvL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fLWvL.png" alt="enter image description here" /></a></p>
  <p>I am trying to do something similar but all attempts are unsuccessful, at the moment I have the following:
  <a href="https://i.stack.imgur.com/7V5T9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7V5T9.jpg" alt="enter image description here" /></a></p>
  <p>My code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
   &lt;nav&gt;
     
      &lt;v-snackbar v-model=&quot;snackbar&quot; :timeout=&quot;4000&quot; top color=&quot;success&quot;&gt;
        &lt;span&gt;Awesome! You added a new project.&lt;/span&gt;
        &lt;v-btn text flat @click=&quot;snackbar = false&quot;&gt;Close&lt;/v-btn&gt;
      &lt;/v-snackbar&gt;
  
          &lt;v-toolbar app clipped-left &gt;
              &lt;v-toolbar-side-icon&gt;&lt;/v-toolbar-side-icon&gt;
               &lt;v-app-bar-nav-icon  @click.stop=&quot;drawer = !drawer&quot;&gt;&lt;/v-app-bar-nav-icon&gt;
              &lt;v-toolbar-title class=&quot;text-uppercase gr ey--text&quot;&gt;
                  &lt;span class=&quot;font-weight-light&quot;&gt;estudos&lt;/span&gt;
                  &lt;span&gt;vue&lt;/span&gt;
              &lt;/v-toolbar-title&gt;
              &lt;v-spacer&gt;&lt;/v-spacer&gt;
  
              &lt;v-menu offset-y&gt;
        &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
          &lt;v-btn text
            color=&quot;primary&quot;
            dark
            v-bind=&quot;attrs&quot;
            v-on=&quot;on&quot;
          &gt;
            &lt;v-icon left&gt;expand_more&lt;/v-icon&gt;
            &lt;span&gt;Menu&lt;/span&gt;
          &lt;/v-btn&gt;
        &lt;/template&gt;
          &lt;v-list&gt;
            &lt;v-list-item v-for=&quot;link in links&quot; :key=&quot;link.text&quot; router :to=&quot;link.route&quot;&gt;
              &lt;v-list-item-title&gt;{{link.text}}&lt;/v-list-item-title&gt;
            &lt;/v-list-item&gt;
          &lt;/v-list&gt;
      &lt;/v-menu&gt;
  
              
              &lt;v-btn text color=&quot;grey&quot;&gt;
                  &lt;span&gt;Sign Out&lt;/span&gt;
                  &lt;v-icon right&gt;exit_to_app&lt;/v-icon&gt;
              &lt;/v-btn&gt;
          &lt;/v-toolbar&gt;
  
  
      
  
      &lt;v-navigation-drawer  v-model=&quot;drawer&quot; app  class=&quot;indigo white--text&quot;&gt; 
               &lt;v-app-bar-nav-icon  @click.stop=&quot;drawer = !drawer&quot;&gt;&lt;/v-app-bar-nav-icon&gt;
               &lt;v-layout column align-center&gt;
                &lt;v-flex class=&quot;mt-5&quot;&gt;
                  &lt;v-avatar size=&quot;90&quot;&gt;
                    &lt;img src=&quot;/avatar-64.png&quot;&gt;
                  &lt;/v-avatar&gt;
                  &lt;p class=&quot;white-text dubheading mt-1&quot;&gt;
                    Estudos Vue
                  &lt;/p&gt;
                &lt;/v-flex&gt;
                &lt;v-flex class=&quot;mt-4 mb-3&quot;&gt;
                  &lt;popup @projectAdded=&quot;snackbar=true&quot; /&gt;
                &lt;/v-flex&gt;
               &lt;/v-layout&gt;
         &lt;v-list &gt;
          &lt;v-divider&gt;&lt;/v-divider&gt;
  
          &lt;v-list-item 
            v-for=&quot;link in links&quot;
            :key=&quot;link.text&quot;
            router :to=&quot;link.route&quot;
          &gt;
            &lt;v-list-item-action &gt;
              &lt;v-icon class=&quot;white--text&quot;&gt;{{ link.icon }}&lt;/v-icon&gt;
            &lt;/v-list-item-action&gt;
  
            &lt;v-list-item-content class=&quot;white--text&quot;&gt;
              &lt;v-list-item-title&gt;{{ link.text }}&lt;/v-list-item-title&gt;
            &lt;/v-list-item-content&gt;
          &lt;/v-list-item&gt;
        &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
      
       &lt;v-row&gt;
      &lt;v-col
       
    
      &gt;
        &lt;v-img
        
        max-height=&quot;76%&quot;
        max-width=&quot;100%&quot;
          src=&quot;/imgtest.jpg&quot;
          gradient=&quot;to top right, rgba(14,12,11,.51), rgba(14,12,11,.71)&quot;
        &gt;
        &lt;v-img-title class=&quot;heading white--text&quot;&gt;
          Bien saude&lt;/v-img-title&gt;&lt;/v-img&gt;
      &lt;/v-col&gt;
  
    &lt;/v-row&gt;
      &lt;/nav&gt;
      
  &lt;/template&gt;
  
  &lt;script&gt;
  import Popup from './Popup'
  export default {
      components: { Popup },
      data() {
          return {
              drawer:false,
              links:[
                   {icon: 'dashboard', text:'Dashboard', route:'/'},
                   {icon: 'folder', text:'My Projects', route:'/projects'},
                   {icon: 'person', text:'Team', route:'/team'},
  
              ],
              items: [
          { title: 'Click Me' },
          { title: 'Click Me' },
          { title: 'Click Me' },
          { title: 'Click Me 2' },
        ],
              snackbar: true
          }
      },
    }
  &lt;/script&gt;
  
  </code></pre>
  <p><strong>I tried adding Block and removing the app, but it didn't solve the problem...
  How do I put my drawer under the toolbar?</strong></p>