Vuetify 2: How to adjust the v-navigation-drawer to not to change the position of the v-content

Question

I think trying to describe it can get confusing, so from the images, I think the problem is going to be much clearer...

Follow the link my Codepen

If I use app in v-navigation-drawer, it comes close to what I would like, but I don't want v-navigation-drawer to occupy the entire side, overlapping the main bar (v-app-bar). What I would like you to occupy only the side, but "without" overlapping the main bar (v-app-bar), but mostly, don't "throw" the v-content to the bottom of the screen

<v-navigation-drawer v-model="drawer">

<v-navigation-drawer v-model="drawer" app>

Answer 1

remove <header> tag around <v-navigation-drawer> and simply override vuetify css using !important

here is a working example: Live Demo