Left Drawer Panel Breaks when Including Right Drawer Panel and Navigating on Another Route

[snowdrop]

[Resolved] Good day. I’m currently working on a simple app using the default quasar template and encountered this problem. I am currently using left and right drawer panels. The problem is if I try to toggle the right drawer panel, and going to another route, the left drawer panel breaks.

I’m toggling the right drawer panel on the mounted life cycle hook of the app, and then trigger the toggling again using the global event bus provided by quasar.

I don’t know if this is expected and I need to do some configuration or this is a bug or maybe related in here:

“Avoid directly using any other means of changing current route, like <router-link>, when on a drawer panel. You also need a way to tell the drawer panel to close itself (if it’s the case, on narrow windows) before navigating away. Notice that the drawer panels can also be closed with the “back” button (both on a desktop or on a mobile device), which means they tamper with window history which must be restored before navigating to another route. Following examples show you how.”

This also occurs even if I’m not toggling the right drawer panel. It just occurs when right drawer panel exists.

I’ve uploaded a video here that replicates the issue -> https://streamable.com/rcfjz. Thanks in advance

[snowdrop]

It seems that I can’t edit the post anymore because it was flagged as spam with the cause of subsequent updates I’ve done in the past hours. For the update, the issue occurs only when the right drawer is closed. When opened, the issue goes away.

[snowdrop]

Update: This issue is now resolved. I’ve made a mistake during the route switch with this code:

<div v-if="$router.currentRoute.name === 'item-1'" slot="right">...</div>

which removes the right side bar because I only want to show it on item-1 page. What I’ve done is remove the above if statement and did this:

watch: {
      '$route' (to, from) {
        if (to.name !== 'item-1') {
          this.$refs.layout.hideRight()
        }
      }
    }

I don’t know if this is an efficient solution and I’m not sure if the right side bar functionality can also be used with cards only so that I won’t need to do the route check but It works so I’ll stick on this one for the mean time. Thanks