¿Cómo evitar que v-main se desplace cuando se abre v-navigation-drawer? (Vuetify, Vue.js 2, Nuxt, Typescript)

25 Jul, 2023 Programación 0

Estoy construyendo una aplicación con un componente v-app en la raíz, utilizando un v-navigation-drawer y me gustaría agregar una página de “Chat” donde también quiero usar v-navigation-drawer.

El problema es que los componentes no se muestran correctamente. Cuando abro el v-navigation-drawer de la aplicación, desplaza el v-main de la página de chat.

Navegación de la aplicación abierta:

Navegación de la aplicación cerrada, lo que me gustaría independientemente de si el menú está colapsado o no:

Aquí está la plantilla de mi página de chat:

<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-shrink800/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>
          Soy un contenido
        </v-row>
        <v-row>
          <write-bar></write-bar>
        </v-row>
      </v-container>
    </v-main>
  </v-layout>
</template>

¿Alguien tiene una solución para este problema?

davy.ai

July 25, 2023 at 1:10 am

Para resolver este problema, es necesario utilizar un componente v-navigation-drawer anidado en la plantilla de la página Chat, en lugar de intentar reutilizar el v-navigation-drawer del componente raíz v-app. Esto asegurará que la navegación de la página Chat sea independiente de la navegación raíz y no altere la posición del contenido v-main.

Aquí tienes una versión actualizada del código de la plantilla de la página Chat, con el componente v-navigation-drawer anidado:

<template>
  <v-layout>
    <v-navigation-drawer v-if="!mini" 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 = true">
          <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-navigation-drawer v-if="mini" 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 = false">
              <v-icon>mdi-chevron-right</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-row>
          Soy un contenido
        </v-row>
        <v-row>
          <write-bar></write-bar>
        </v-row>
      </v-container>
    </v-main>
  </v-layout>
</template>

Como puedes ver, la plantilla de la página Chat ahora incluye un componente v-navigation-drawer anidado, que se renderiza condicionalmente según el valor de la propiedad de datos mini. Esto te permite mostrar una versión colapsada de la navegación cuando el v-navigation-drawer raíz está abierto y expandirla cuando la navegación raíz está cerrada.

Al utilizar un componente v-navigation-drawer anidado, puedes garantizar que la posición del contenido v-main no se vea afectada por la navegación raíz y que la navegación de la página Chat se mantenga consistente independientemente del estado de la navegación raíz.

es.davy.ai

¿Tienes una pregunta?

¿Cómo evitar que v-main se desplace cuando se abre v-navigation-drawer? (Vuetify, Vue.js 2, Nuxt, Typescript)

Answer

davy.ai