title: Vuetify Layout with expandable navigationdrawer
body: <p>so I included Vuetify in my Vue project and wanted to build my basic layout featuring an Navigation Drawer like in the Example called "Mini" <a href="https://vuetifyjs.com/en/components/navigation-drawers/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>So the navigation drawer only shows Icons but on click it expands to show some text too. You can see my 
  current state <a href="https://i.stack.imgur.com/9uypu.png" rel="nofollow noreferrer">here</a>.</p>
  
  <p>My Problem now is, that the actual content of the page should be placed on the right side next to this drawer and change in size when the drawer gets expanded. I placed one div with text there for testing, and it always gets placed beneath the navigation drawer. Also the navigation drawer should take up the whole screen height.
  What am I doing wrong here?</p>
  
  <p>This is the template-segment of the component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      &gt;
        &lt;v-list-item class="px-2"&gt;
          &lt;v-btn
              fab
              small
              onclick="window.location.href='/controlCenter'"
          &gt;
              &lt;v-icon&gt;mdi-plus&lt;/v-icon&gt;
          &lt;/v-btn&gt;
  
          &lt;v-list-item-title&gt; Just some test stuff &lt;/v-list-item-title&gt;
  
          &lt;v-btn
            icon
            @click.stop="mini = !mini"
          &gt;
            &lt;v-icon&gt;mdi-chevron-left&lt;/v-icon&gt;
          &lt;/v-btn&gt;
        &lt;/v-list-item&gt;
  
        &lt;v-divider&gt;&lt;/v-divider&gt;
  
        &lt;v-list dense&gt;
          &lt;v-list-item
            v-for="(block, index) in layouts2"
            v-bind:key="`layout-button-${block._uid}`"&gt;
            &lt;v-list-item-icon&gt;
              &lt;v-icon
              v-on:click="switchLayouts(block._uid)"&gt;
                  mdi-home-city
              &lt;/v-icon&gt;
            &lt;/v-list-item-icon&gt;
  
            &lt;v-list-item-content&gt;
              &lt;v-list-item-title&gt; Layout {{index + 1}} &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;div&gt;
        normal content here
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I also saw this same question <a href="https://stackoverflow.com/questions/51682277/vuetify-nagviation-drawer-main-text-displays-on-bottom-instead-of-the-right-side">here</a> but if I try this, i get quite some errors. So after reading  this, I tested the following. But I must be doing something wrong.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-navigation-drawer
        app //use app like suggested
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      &gt;
        &lt;v-list-item class="px-2"&gt;
          &lt;v-btn
              fab
              small
              onclick="window.location.href='/controlCenter'"
          &gt;
              &lt;v-icon&gt;mdi-plus&lt;/v-icon&gt;
          &lt;/v-btn&gt;
  
          &lt;v-list-item-title&gt; Just some test stuff &lt;/v-list-item-title&gt;
  
          &lt;v-btn
            icon
            @click.stop="mini = !mini"
          &gt;
            &lt;v-icon&gt;mdi-chevron-left&lt;/v-icon&gt;
          &lt;/v-btn&gt;
        &lt;/v-list-item&gt;
  
        &lt;v-divider&gt;&lt;/v-divider&gt;
  
        &lt;v-list dense&gt;
          &lt;v-list-item
            v-for="(block, index) in layouts2"
            v-bind:key="`layout-button-${block._uid}`"&gt;
            &lt;v-list-item-icon&gt;
              &lt;v-icon
              v-on:click="switchLayouts(block._uid)"&gt;
                  mdi-home-city
              &lt;/v-icon&gt;
            &lt;/v-list-item-icon&gt;
  
            &lt;v-list-item-content&gt;
              &lt;v-list-item-title&gt; Layout {{index + 1}} &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-content&gt;  // use v-content like suggested
        &lt;p&gt;Hi&lt;/p&gt;
      &lt;/v-content&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>The errors are </p>
  
  <p><code>vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'register' of undefined"</code> &amp; <code>[Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined"</code> &amp; <code>[Vue warn]: Error in callback for watcher "isActive": "TypeError: Cannot read property 'register' of undefined"</code>
  Some of them also appear several times.</p>
  
  <p>Thanks for your help!</p>