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?

Looks like a CSS issue. Did you inspected the DOM with your devtools here? — kissu, Dec 19 '21 at 13:11
@kissu > I didn't add any CSS... I believe it's a property coming from Vuetify. I'll give update as soon as I find a solution. Thanks for your comment ! :) — CosmicDarine, Dec 19 '21 at 21:49

score 1 · Accepted Answer · answered Dec 21 '21 at 00:21

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.

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

1 Answers1