How to prevent v-main to shift when v-navigation-drawer is opened ? (Vuetify, Vue.js 2, Nuxt, Typescript) - layout

Question

I'm building an app with a v-app component at the root, using a v-navigation-drawer and I'd like to add a "Chat" page, where I'd also like to use v-navigation-drawer.
Problem is components don't display correctly. When I open the v-navigation-drawer of the app, it shifts the v-main of the chat page.
Opened app navigation
Closed app navigation, what I'd like regardless of whether the menu is collapsed or not
Here is my chat page's template:
<template>
<v-layout>
<v-navigation-drawer
permanent
color="deep-purple accent-6"
v-model="drawer"
:mini-variant.sync="mini"
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img
src="https://media-exp1.licdn.com/dms/image/C4D03AQHYJ44y1nW7Rw/profile-displayphoto-shrink_800_800/0/1634940206364?e=1645660800&v=beta&t=ni_NG94SNNVHDbzpVEtKwftayQzDy1bDtse2FavjDSU"
></v-img>
</v-list-item-avatar>
<v-list-item-title>Cosmic Darine</v-list-item-title>
<v-btn icon #click.stop="mini = !mini">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in menuItems" :key="item.title" link>
<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>
<v-main>
<v-container>
<v-row>
I am a content
</v-row>
<v-row>
<write-bar />
</v-row>
</v-container>
</v-main>
</v-layout>
</template>
Does anyone have a solution for this problem?

Answer 1

I managed to find a solution. I added 'absolute' as a prop to v-navigation-drawer. The menu open above the content (I wanted that, so it's okay) and doesn't shift the content anymore. But if anyone would like to shift content when it opens only when needed, I guess you have to use the #media rule and margin with a negative value to shift back when the screen width is under a specific value.