How to put navigation-drawer under app-bar for mobile in vuetify?

user_14507408 0
Viewed 8955

Desktop Mode Image

Desktop Mode Image

Mobile Mode Image

Mobile Mode Image

The "clipped" option works fine in desktop mode.

However, in mobile mode, menu items are hidden by the app-bar. ("Dashboard" item is hidden.)

How can I put the navigation-drawer under the app-bar even in mobile mode?

My Source:

<template>
  <v-app>
    <v-app-bar app color="primary" dark clipped-left>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-app-bar>

    <v-navigation-drawer app v-model="drawer" absolute clipped>
      <v-list nav>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-main> </v-main>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    drawer: null,
    items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Photos', icon: 'mdi-image' },
          { title: 'About', icon: 'mdi-help-box' },
        ]
  }),
};
</script>
navigation-drawer vue.js
4 Answers

Below code worked for me.

<v-app-bar app clipped-left>
  <v-app-bar-nav-icon v-if="!permanent" @click.stop="drawer = !drawer" />
  <v-toolbar-title v-text="title" />
</v-app-bar>
<v-navigation-drawer
  v-model="drawer"
  :permanent="permanent"
  expand-on-hover
  clipped
  app
>
...
</v-navigation-drawer>

I am able to do what I want using this link Vuetify 2 toolbar ans 1 navigation drawer with 1 toolbar above the navigation drawer

user_28422700

This worked for me.

Vuetify navigation drawer under app-bar

<v-app id="inspire">
   <v-overlay
      :value="drawer"
      z-index="4"
    >
    </v-overlay>
    <v-navigation-drawer
      v-model="drawer"
      app
      clipped
      hide-overlay
      :style="{ top: $vuetify.application.top + 'px', zIndex: 4 }"
    >
    </v-navigation-drawer>

    <v-app-bar
      app
      clipped-left
      dark
      color="#447fa6"
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-app-bar>
</v-app>

Codepen

user_124968860

Try to remove app from <v-app-bar app>. I don't know why, but for me it is working.

user_55289060

these changes made it work for me:

<v-app-bar :clipped-left="true" :clipped-right="true"></v-app-bar>

depending on what you need and which side you want to add the navigation drawer

then in navigation drawer add the clipped attribute as well

<v-navigation-drawer :clipped="true"></v-navigation-drawer>

user_145168300
Related