Vuetify 2 toolbar ans 1 navigation drawer with 1 toolbar above the navigation drawer

问题

I'm trying to achieve something like this :

Actually i have this :

My problem is that currently I can not put the first toolbar above the navigation drawer.

<template>
  <v-app>
    <v-toolbar app class="elevation-1">
        <span>Toolbar1</span>
    </v-toolbar>

    <v-toolbar app class="mt-5 elevation-1" style="top: 16px">
      <span>Toolbar2</span>
    </v-toolbar>

    <v-navigation-drawer app fixed permanent>
      <v-toolbar></v-toolbar>
      <v-toolbar flat>
        <v-list>
          <v-list-tile>
            <v-list-tile-title class="title">Filter</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-toolbar>
    </v-navigation-drawer>

    <v-content class="mt-5">
      <HomePage/>
    </v-content>
  </v-app>
</template>

回答1:

I would first add clipped-left to the first toolbar and move it under the navigation-drawer like so.

<template>
  <v-app>
    <v-navigation-drawer app fixed permanent>
      <v-toolbar></v-toolbar>
      <v-toolbar flat>
        <v-list>
          <v-list-tile>
            <v-list-tile-title class="title">Filter</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-toolbar>
    </v-navigation-drawer>

    <v-toolbar app clipped-left class="elevation-1">
      <span>Toolbar1</span>
    </v-toolbar>

    <v-toolbar app class="mt-5 elevation-1" style="top: 16px">
      <span>Toolbar2</span>
    </v-toolbar>

    <v-content class="mt-5">
      <HomePage/>
    </v-content>
  </v-app>
</template>

Though, I strongly advice you to get familiar with the available props on the Vuetify documentation (regarding those 2 components) to be able to get exactly what you want

Navigation Drawer
Toolbar

Update

I did some ugly fixes to the previous answer to handle the responsiveness and clean the code a bit.

<template>
  <v-app>
    <v-navigation-drawer clipped permanent app>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title">Menu Item #1</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar clipped-left app>
      <span>Toolbar</span>
    </v-toolbar>

    <v-toolbar class="mt-5" :style="$vuetify.breakpoint.smAndDown ? 'top: 8px' : 'top: 16px'" app>
      <span>SubToolbar</span>
    </v-toolbar>

    <v-content :style="$vuetify.breakpoint.smAndDown ? 'padding-top: 112px' : 'padding-top: 128px'">
      <v-container fluid>
        Content
        <!-- <router-view></router-view> -->
      </v-container>
    </v-content>
  </v-app>
</template>

回答2:

I just answerd another similar question, despite I did it wrong first time, I think I redeemed myself on the edit, here

Anyhow, I was wanting to do the same, so I changed the v-content to v-main, for the actual content. Also, used the app, permanent and clipped, without the fixed prop. The app navbar also should have clipped-right in your case. That did the trick for me

<v-app-bar
app
clipped-left
color="#c4161c"
dark
>
...
</v-app-bar>

...

<v-navigation-drawer
app
permanent        
clipped
class="mt-100"        
>
...
</v-navigation-drawer>

来源：https://stackoverflow.com/questions/55867477/vuetify-2-toolbar-ans-1-navigation-drawer-with-1-toolbar-above-the-navigation-dr

标签

html

Vue.js

vuetify.js