multiple q-layouts that toggle

[wesleysmith1]

In the project i’m working on there is a q-layout with q-side-links on the left side. I have a second q-layout with q-side-links that is just a smaller version of the first with thumbnails. When one q-layout closes the other opens. Because of the multiple q-layouts there is a lot of white space left to scroll down. It appears that even though one of the q-layouts is hidden it doubles the height necessary for the page. Is there any way to prevent having this extra height because of the multiple q-layouts?

[benoitranque]

Couple things there.

First: hard to help you without seeing your code
Second: q-layouts do not close or open. Not sure what you are talking about.
Third: Using a v-show on a q-layout would result in the behavior you describe, as this hides the element but it still is there. Use v-if instead
Fourth: You are not supposed to have multiple q-layouts in the same file or active at the same time.
Fiftht: Have you considered using routes for this? This is how I handle it:

// router.js

routes: [
      {
      path: '/',
      component: load('Layout1'),
      children: [
        {
          path: '',
          component: load('Index')
        },
        {
          path: '404',
          component: load('404')
        },
       {
          path: 'route1',
          component: load('Route1')
        }
      ]
    },
    {
      path: '/',
      component: load('Layout2'),
      children: [
        {
          path: 'route2',
          component: load('Route2')
        }
      ]
    },
    { path: '*', redirect: '/404' } // Not found
]

In this example, note the default and 404 routes. When matching a route, the first match is used. So we first look for a suitable route using layout1, then using layout2.
'/route1' would use the first layout, '/route2' the second one. You could also have a function that returns a different layout depending on a variable.