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

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.