[Bug Report][3.0.0] navigation drawer get appear when we navigate to pages.

[alokVishu]

Environment

Vuetify Version: 3.0.0-beta.10 Vue Version: 3.2.38 Browsers: Chrome 105.0.0.0 OS: Windows 10

Steps to reproduce

Set up a project with route animation slide-x-reverse-transition with drawer animation.

Expected Behavior

navigation drawer should not appear.

Actual Behavior

A navigation drawer appears.

Reproduction Link

https://github.com/alokVishu/vuetify-navigation-issue

Other comments

Live Demo

[johnleider]

The issue is evident but it would go a long way to have a simple reproduction.

[alokVishu]

Hello,

is there any update regarding the same issue? This issue is causing a major obstacle for us.

[johnleider]

If there is an update it will be posted here.

[johnleider]

We do this in the docs and have no issues; I'm not sure what you're running into. https://github.com/vuetifyjs/vuetify/blob/2be7ef5a63c27c7ae3d61d2cea7434df53184ac4/packages/docs/src/layouts/default.vue#L28

If you have any questions, please reach out to us in our Discord community.

[alokVishu]

Hello @johnleider,

Thank you for your thorough investigation of the issue. However, I would like to point out that the problem still persists with other transitions, even after updating our reproduction GitHub repo to the latest Vuetify starter kit.

I have attached a screenshot and included the app.vue code snippet in this message. I understand that you may have already put in significant effort to resolve this issue.

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <VApp>
    <VMain class="layout-page-content wrapper">
      <v-row>
        <v-col cols="4" class="border-e">
          <nav>
            <v-list>
              <v-list-item>
                <RouterLink to="/" class="me-3">
                  Home
                </RouterLink>
              </v-list-item>
              <v-list-item>
                <RouterLink to="/about">About</RouterLink>
              </v-list-item>
            </v-list>
          </nav>
        </v-col>

        <v-col cols="8">
          <p class="mb-6">
            You can find the navigation drawer toggler button on the about page. Please don't open devtool to see the issue.
          </p>

          <!-- 👉 Pages -->
          <RouterView v-slot="{ Component }">
            <v-slide-x-reverse-transition hide-on-leave>
              <Component :is="Component" />
            </v-slide-x-reverse-transition>
          </RouterView>
        </v-col>
      </v-row>

    </VMain>
  </VApp>
</template>

<style lang="scss">
.layout-page-content {
  margin-inline: auto;
  width: 1450px;
}
</style>

 <RouterView v-slot="{ Component }">
      <v-slide-x-reverse-transition hide-on-leave>
         <Component :is="Component" />            
      </v-slide-x-reverse-transition>
 </RouterView>

Thank you for your attention and assistance in resolving this matter.

[alokVishu]

live link 👍 https://lucky-kangaroo-e41445.netlify.app/

Note Please open live demo without chrome dev tool so you get enough space to see the bug

[johnleider]

I see the issue, but the provided code does not contain a v-navigation-drawer. At a glance, it looks like you're including the drawer as part of the layout that transitions. If this is truly still broken, please create a new issue that minimally reproduces the problem with enough information to properly triage.

If you have any questions, please reach out to us in our Discord community.

[alokVishu]

Hi @johnleider 👋🏻 ,

Thanks for your response and for taking the time to look into this.

Sorry for the confusion but I request you to please check the repo source code for the minimal example. In the repo I have the following:

• About page/view that has navigation drawer on the right side
• Router View that is wrapped in v-slide-x-reverse-transition transition

For this example I have also provided the GIF: https://user-images.githubusercontent.com/80033712/228147099-f2220ced-1405-40e3-9bd8-e10cc8c7d813.gif

Unfortunately, I'm unable to add vue-router in the vuetify playground hence I had to share the repo. I request you to please check the repo that has minimal examples and let me know if you need any more information.

Moreover, that repo is deployed on this link if you want to test a live demo of the source code.

Thanks for your patience and assistance.

Best Regards.

[alokVishu]

Hello @johnleider,

I wanted to bring to your attention that the issue at hand has not been resolved. Therefore, I kindly request you to reconsider reopening the matter.

[johnleider]

Hello @johnleider,

I wanted to bring to your attention that the issue at hand has not been resolved. Therefore, I kindly request you to reconsider reopening the matter.