Vuetify component "v-navigation-Drawer": bug when scrolling on the page

Asked

Viewed 146 times

0

I have the following problem with the v-navigation-Drawer component of Vuetify: if I am at the top of the page, it works correctly: inserir a descrição da imagem aqui




However, if I go down a bit (scroll), the content of v-navigation-Drawer goes up: inserir a descrição da imagem aqui

Someone who’s been through the same thing knows if they have any property to pin it on, or I’ll have to hand it to them?

Code:

<template>
  <v-navigation-drawer
    v-model="$store.state.showSidebar"
    absolute
    temporary
  >
    <v-list-item>
      <v-list-item-avatar>
        <v-img :src="publicPath + 'assets/img/deyvid.jpg'"></v-img>
      </v-list-item-avatar>

      <v-list-item-content>
        <v-list-item-title>{{ app.author }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-divider></v-divider>

    <v-list dense>
        <v-list-item 
          v-for="item in items"
          :key="item.title"
          link
          @click="redirect(item.href)"
        >
          <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>
</template>

<script>
  export default {
    data () {
      return {
        app: this.$store.state.app,
        publicPath: process.env.BASE_URL,
        items: [
          { title: 'Home', icon: 'mdi-home', href: 'Home' },
          { title: 'About me', icon: 'mdi-information', href: 'About' },
          { title: 'My projects', icon: 'mdi-folder-open', href: 'Projects' },
        ],
      }
    },
    methods: {
      redirect(routerName) {
        this.$router.push({ name: routerName })
      }
    }
  }
</script>

1 answer

0

Try switching from Absolute to app

Of:

<v-navigation-drawer
    v-model="$store.state.showSidebar"
    absolute
    temporary>

For:

<v-navigation-drawer
    v-model="$store.state.showSidebar"
    app
    temporary
  >

Do the same with the v-app-bar component

Browser other questions tagged

You are not signed in. Login or sign up in order to post.