如何在vue材质的工具栏下面制作sidenav？

Question

所以我使用了vue-material的vuejs，我遇到了问题。

所以这就是没有固定侧边的情况。

当我添加sidenav ..

正如您所看到的，工具栏位于导航栏下面，这不是我想要做的。我想要工具栏下的sidenav。

我目前的代码：

<template>
  <div id="app">
    <md-toolbar class="z-index:9999;">
      <md-button class="md-icon-button">
        <md-icon>menu</md-icon>
      </md-button>
      <h2 class="md-title" style="flex: 1">Personal Data Sheet</h2>
      <md-button class="md-icon-button">
        <md-icon>search</md-icon>
      </md-button>
    </md-toolbar>
    <md-sidenav class="md-fixed" ref="leftSidenav">
      <md-toolbar class="md-large md-accent">
        <div class="md-toolbar-container">
        <md-avatar class="md-large">
          <img src="static/dost-seal.jpg" alt="People">
        </md-avatar>
          <h3 class="md-title">DOST - MIRDC</h3>
        </div>
      </md-toolbar>
    </md-sidenav>
    <router-view></router-view>
  </div>
</template>

非常感谢任何帮助。