Search code examples
cssvue.jsvuejs2vuetify.jsnavbar

Vuetify Drawer tabs overflow/z-index

I am trying to implement a sidebar expandable menu with Vuetify2 as shown in the docs, however after hours of struggling and trying different suggested in the docs options couldn't find a way to make the expanded menu overflow and appear above all other items.

Current behavior pushes everything away and causes it to flip on the next row and it would be definitely preferable expansion of the sidebar not to mess up the page elements.

Below is the drawer component's template:

    <v-card>
      <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      >
        <v-list>
          <v-list-item class="px-2">
            <v-list-item-avatar>
              <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
            </v-list-item-avatar>
            <v-spacer></v-spacer>
            <v-btn
              icon
              @click.stop="mini = !mini"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
          </v-list-item>

          <v-list-item>
            <v-list-item-content>
              <v-list-item-title class="text-h6">
                {{ $auth.user?.name }}
              </v-list-item-title>
              <v-list-item-subtitle>{{ $auth.user.email }}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>

And parent components template:

    <v-app>
     <div class="row">
       <navbar @change-tab="changeTab" :items="items">
       </navbar>
       <div class="container">
         <other custom components>
       </div>
     </div>
    <v-app>

I have tried overriding z-index and overflow (y/x/and both) on .v-navigation-drawer. Also experimented the same way with the wrapping v-card but still no joy.

Solution

  • It looks like you are trying to layout the navbar yourself by putting it into the div with the "row" class. But for top-level app components like the navigation drawer, Vuetify does this for you. So it should be just:

    <v-app>
  <navbar @change-tab="changeTab" :items="items"></navbar>
  <v-main>
    ...
  </v-main>
<v-app>

    The documentation in v2 is pretty sparse ("More to follow"), but it might help to look at the documentation for v3 - while it does not behave the same, it might give you an idea how it works.