title: Vuetify overlay overlays the drawer
body: <p>I'm trying to create a navbar for Vue application, I'm using Vuetify, on large screen there is toolbar, on small there is hamburger icon which opens the navigation drawer. </p>
  
  <p>It works, but there is an overlay that comes in front of drawer and I can't change a page.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-app-bar dark&gt;
        &lt;v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"&gt;&lt;/v-app-bar-nav-icon&gt;
        &lt;v-navigation-drawer v-model="sidebar" app&gt;
          &lt;v-list&gt;
            &lt;v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path"&gt;{{item.title}}&lt;/v-list-item&gt;
          &lt;/v-list&gt;
        &lt;/v-navigation-drawer&gt;
        &lt;v-toolbar-title&gt;Jobify&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 v-for="item in menuItems" :key="item.title"&gt;
            &lt;router-link :to="item.path"&gt;{{item.title}}&lt;/router-link&gt;
          &lt;/v-btn&gt;
        &lt;/v-toolbar-items&gt;
      &lt;/v-app-bar&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: function() {
      return {
        sidebar: false,
        menuItems: [
          { path: "/jobs", name: "jobs", title: "Jobs" },
          { path: "/companies", name: "companies", title: "Companies" },
          { path: "/jobs/new", name: "new-job", title: "Add job" }
        ]
      };
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt; 
  </code></pre>
  
  <p>Only Vuetify components that I'm using are here, there is, actually, <code>v-app</code> in App component.</p>