CODEWITHSUNDEEP
vue.jsnavigation-drawer
plztrial4me
plztrial4me

Reputation: 303

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

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>

Upvotes: 4

Views: 16115

Answers (5)

Elar Saks
Elar Saks

Reputation: 181

Adding :mobile-breakpoint="0" to navigation drawer fixes the issue.
No mobile styling is added to the navigation drawer and it works same as on desktop.
EX:

<v-navigation-drawer
  app
  v-model="drawerOpen"
  :clipped="true"
  :mobile-breakpoint="0"
 >...

Upvotes: 1

fafa.mnzm
fafa.mnzm

Reputation: 611

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>

Upvotes: 0

mavok
mavok

Reputation: 47

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

Upvotes: 0

Georgiy Bukharov
Georgiy Bukharov

Reputation: 396

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

Upvotes: 4

Ashok
Ashok

Reputation: 41

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

Upvotes: 4

Related Questions