title: How to make a sidenav below the toolbar in vue material?
body: <p>So I am using vuejs with <a href="https://vuematerial.github.io" rel="nofollow noreferrer">vue-material</a> and I have a problem.</p>
  
  <p>So this is what it looks like without the fixed sidenav.</p>
  
  <p><a href="https://i.stack.imgur.com/R3rBF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R3rBF.png" alt="enter image description here"></a></p>
  
  <p>And when I add a sidenav..</p>
  
  <p><a href="https://i.stack.imgur.com/Dgda6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dgda6.png" alt="enter image description here"></a></p>
  
  <p>As you can see the toolbar is under the navbar which is not what I want to do. I want the sidenav under the toolbar.</p>
  
  <p>My current code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;md-toolbar class="z-index:9999;"&gt;
        &lt;md-button class="md-icon-button"&gt;
          &lt;md-icon&gt;menu&lt;/md-icon&gt;
        &lt;/md-button&gt;
        &lt;h2 class="md-title" style="flex: 1"&gt;Personal Data Sheet&lt;/h2&gt;
        &lt;md-button class="md-icon-button"&gt;
          &lt;md-icon&gt;search&lt;/md-icon&gt;
        &lt;/md-button&gt;
      &lt;/md-toolbar&gt;
      &lt;md-sidenav class="md-fixed" ref="leftSidenav"&gt;
        &lt;md-toolbar class="md-large md-accent"&gt;
          &lt;div class="md-toolbar-container"&gt;
          &lt;md-avatar class="md-large"&gt;
            &lt;img src="static/dost-seal.jpg" alt="People"&gt;
          &lt;/md-avatar&gt;
            &lt;h3 class="md-title"&gt;DOST - MIRDC&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/md-toolbar&gt;
      &lt;/md-sidenav&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Any help would be much appreciated.</p>