javascript - 如何在vue材料的工具栏下方制作一个sidenav？

Question

所以我将 vuejs 与vue-material一起使用，但我遇到了问题。

所以这就是没有固定侧导航的样子。

当我添加一个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>

任何帮助将非常感激。