如何使用 Vuetify 网格系统同时创建侧边栏和导航栏？

Question

我正在尝试使用同时具有侧边栏和导航栏的 Vuetify 创建背景。它应该是这样的：

目前我已经使用 v-navigation-drawer 创建了侧边栏，但是我无法将导航栏放在正确的位置。如何将导航栏添加到以下代码，使其看起来像上图？

<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
>
...

如果您希望 app-bar 出现在 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>

Demo

如何使用 Vuetify 网格系统同时创建侧边栏和导航栏？

How to use Vuetify grid system to create both a sidebar and a navbar?

sidebar

grid-system

navbar

vue.js

vuetify.js

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