I am struggling with aligning my v-navigation-drawer component under my v-app-bar component in my simple app bar and navigation drawer page. The official vuetify documentation provides a clear example of how the layout should look (Example). See https://i.sstatic.net/EeVbJ.png
I aim to achieve the official layout as it is more visually appealing than what I currently have. Despite trying various props on both the v-app-bar and v-navigation-drawer components, I have not been able to achieve the desired outcome.
EDIT: My code is being loaded as a component in my main App.vue
This is my current code:
<template>
<div>
<v-app-bar app clipped-leftS flat dark>
<v-toolbar-title>
<span class="first-word font uppercase">hi</span>
<span class="second-word font uppercase">stackoverflow</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-navigation-drawer app flat dark mini-variant permanent expand-on-hover>
<v-list>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/11.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Doe</v-list-item-title>
</v-list-item>
<v-list-item v-for="item in navbarlist" :key="item.route" :to="item.route">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>{{ item.text }}</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
data: () => ({
navbarlist: [
{ icon: "mdi-view-dashboard", text: "Dashboard", route: "/" },
{ icon: "mdi-upload", text: "Upload", route: "/upload" },
],
}),
};
</script>
<style>
.font {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.uppercase {
text-transform: uppercase;
}
.first-word {
font-weight: 400;
}
.second-word {
font-weight: 200;
color: grey;
}
.item-tile-icon {
color: black;
}
</style>