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:
However, if I go down a bit (scroll), the content of v-navigation-Drawer goes up:
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>