Vuetify：如何使用 v-navigation-drawer 和 v-main 调整布局

Question

我正在尝试构建这样的布局：

https://i.stack.imgur.com/AFKyR.png

但是现在 v-main 不能保持在 v-navigation-drawer 旁边的左侧。它出现在 v-navigation-drawer 下方（现在看起来像 this）。

这是我的代码：

https://codepen.io/magooo/pen/mdRKaVQ?editors=1010

<div id="app">
  <v-app id="inspire">
    <div>
      <v-app-bar color="deep-purple accent-4" dark>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>App Bar</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </v-app-bar>

      <!-- tool-bar -->
      <v-toolbar>
        <v-btn depressed class="mr-2">
          <v-icon class="mr-2">fas fa-database</v-icon>
          <span>Add</span>
        </v-btn>

        <v-menu offset-y>
          <template v-slot:activator="{ on, attrs }">
            <v-btn depressed v-bind="attrs" v-on="on">
              <v-icon class="mr-2">fas fa-chart-bar</v-icon>
              <span>Add</span>
            </v-btn>
          </template>
          <v-container fluid>
            <v-row dense>
              <v-col v-for="card in cards" :key="card.title" :cols="card.flex">
                <v-card>
                  <v-img :src="card.src" class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="200px">
                    <v-card-title v-text="card.title"></v-card-title>
                  </v-img>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </v-menu>

        <v-spacer></v-spacer>

        <v-btn depressed class="mr-2" color="primary">
          <v-icon class="mr-2">fas fa-search</v-icon>
          <span>Search</span>
        </v-btn>

        <v-btn depressed class="mr-2">
          <v-icon class="mr-2">fas fa-download</v-icon>
          <span>download</span>
        </v-btn>

        <v-btn depressed>
          <v-icon class="mr-2">fas fa-cog</v-icon>
          <span>settings</span>
        </v-btn>
      </v-toolbar>

      <v-navigation-drawer permanent left width="320" height="100vh" hide-overlay>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title">
              <v-icon class="mr-2">fas fa-chart-bar</v-icon>
              navigation drawer
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-divider></v-divider>

        <v-card elevation="0">

          <v-tabs v-model="tab" background-color="transparent" grow>
            <v-tab key="k1" href="#k1">Tab1</v-tab>
            <v-tab key="k3" href="#k3">Tab3</v-tab>
          </v-tabs>

          <v-tabs-items v-model="tab">
            <v-tab-item key='k1' value='k1'>Data 1</v-tab-item>

            <v-tab-item key='k3' value='k3'>Data 3</v-tab-item>
          </v-tabs-items>
        </v-card>
      </v-navigation-drawer>

      <v-main>
        <h1>hi</h1>
      </v-main>
    </div>
  </v-app>
</div>

有人可以帮我解决问题吗？提前致谢:)