I'm trying to create a navbar for Vue application, I'm using Vuetify, on large screen there is toolbar, on small there is hamburger icon which opens the navigation drawer.

It works, but there is an overlay that es in front of drawer and I can't change a page.

Here is the code:

<template>
  <div>
    <v-app-bar dark>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-toolbar-title>Jobify</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      sidebar: false,
      menuItems: [
        { path: "/jobs", name: "jobs", title: "Jobs" },
        { path: "/panies", name: "panies", title: "Companies" },
        { path: "/jobs/new", name: "new-job", title: "Add job" }
      ]
    };
  }
};
</script>

<style>
</style> 

Only Vuetify ponents that I'm using are here, there is, actually, v-app in App ponent.

I'm trying to create a navbar for Vue application, I'm using Vuetify, on large screen there is toolbar, on small there is hamburger icon which opens the navigation drawer.

It works, but there is an overlay that es in front of drawer and I can't change a page.

Here is the code:

<template>
  <div>
    <v-app-bar dark>
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>
      <v-toolbar-title>Jobify</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      sidebar: false,
      menuItems: [
        { path: "/jobs", name: "jobs", title: "Jobs" },
        { path: "/panies", name: "panies", title: "Companies" },
        { path: "/jobs/new", name: "new-job", title: "Add job" }
      ]
    };
  }
};
</script>

<style>
</style> 

Only Vuetify ponents that I'm using are here, there is, actually, v-app in App ponent.

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuetify.js

Share Improve this question Follow edited Jul 17, 2020 at 17:11 Boussadjra Brahim 1 asked Nov 12, 2019 at 13:00 MerimMerim 1,34722 gold badges2424 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Try to add hide-overlay prop to the v-navigation-drawer ponent in order to hide the overlay :

 <v-navigation-drawer v-model="sidebar" app hide-overlay >