如何使用 Vuetify 網格系統同時創建側邊欄和導航欄？

Question

我正在嘗試使用同時具有側邊欄和導航欄的 Vuetify 創建背景。 它應該如下所示：

目前我已經使用 v-navigation-drawer 創建了側邊欄，但是我無法在正確的位置將導航欄指向 go。 如何將導航欄添加到以下代碼中，使其看起來像上圖？

<template>
<div id="app">
    <v-app id="inspire">
        <v-navigation-drawer
            color="#09151E"
            permanent
            expand-on-hover
        >
            <v-divider></v-divider>
            <v-list nav dense>
                <v-list-item link href="#">
                    <v-list-item-icon>
                        <v-icon color="white" small>mdi-lightbulb</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title class="title">Blue</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-card>Navbar</v-card>
    </v-app>
</div>

我知道在下面寫 v-card 不是應該這樣寫，但是使用 v-row 和 v-col 會使空白出現在頁面的角落周圍並且看起來不太好

Answer 1

您需要做的就是：

• 創建v-app-bar或v-toolbar組件

• 將app道具添加到您的v-navigation-drawer

演示： https://codepen.io/aQW5z9fe/pen/GRpQqpG?editors=1010

<v-app-bar app>
  Title
</v-app-bar>

<v-navigation-drawer
  color="#09151E"
  permanent
  expand-on-hover
  app
>
...

如果您希望它出現在navigation-drawer后面而不是在它旁邊，您可以將clipped-left道具添加到app-bar 。

Answer 2

您需要在“v-navigation-drawer”之前使用app道具創建一個“v-app-bar”。 移除permanent道具，並將app道具添加到導航抽屜..

   <v-app id="inspire">
      <v-app-bar
          app
          color="yellow"
        >
          <v-toolbar-title>Navbar</v-toolbar-title>
          <v-spacer></v-spacer>
      </v-app-bar>
      <v-navigation-drawer
            app
            color="#09151E"
            expand-on-hover>
            <v-divider></v-divider>
            <v-list nav dense>
                ...
            </v-list>
      </v-navigation-drawer>
      <v-content>
          ...
      </v-content>
   </v-app>

演示