Vuetify工具栏被导航抽屉遮盖

Question

I would like an application layout that has a fixed toolbar at the top and a left-hand navigation drawer underneath. In addition the navigation drawer should behave as "temporary", ie the user can click outside of the drawer to dismiss it.

I can get the visual effect I want with a non-temporary drawer, but this does not react to mouse clicks outside. When it is marked as temporary it behaves correctly but visually is rendered over the top of the toolbar.

How can I ensure the navigation drawer is always rendered below the toolbar and does not obscure it AND is dismissed when the user clicks outside?

See this codepen example

  <div id="app">
    <v-app id="inspire" >
      <v-navigation-drawer clipped app :temporary="temporary" v-model="drawer" hide-overlay>
      <v-list dense>
        <v-list-tile>I must respect the Toolbar and appear below</v-list-tile>
        <v-list-tile>Home 1</v-list-tile>
        <v-list-tile>Home 2</v-list-tile>
        <v-list-tile>Home 3</v-list-tile>
        <v-list-tile>Home 4</v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar color="blue darken-3" dark app clipped-left>
      <v-btn @click="drawer = !drawer">Show drawer</v-btn>
      <v-toolbar-title>Toolbar should be always on top!</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-switch v-model="temporary" label="Make drawer temporary" hide-details/>
    </v-toolbar>

    <v-content>
      <v-container fluid fill-height>
        nothing to see here
      </v-container>
    </v-content>

  </v-app>
</div>

javascript:

  new Vue({
    el: "#app",
    data: () => ({
      drawer: false,
      temporary: false
    })
  });

Answer 1

Ok so it seems that what you are experiencing is the expected behaviour so this is not an issue with Vuetify, however you can achieve what you are describing by adding your own overlay.

simply add your own overlay that is shown only when drawer is present, give it the relevant styling to fill the page and the correct z-index to sit between the page and the drawer. Then just apply an @click to set drawer to false.

<div v-if="drawer" class="custom_overlay" @click="drawer = !drawer"></div>

.custom_overlay {
    position: fixed;
    height: 100vh;
    width: 100%;
    background: rgba(50,50,50,0.5);
    z-index:2;
}

See example here: https://codepen.io/anon/pen/YoLwgv