Make q-tabs toggle drawer

[danielo515]

Hello,

I’m using quasar 0.14 and I was trying to figure out how to make tabs to toggle left drawer. My left drawer is holding the route view z and I want to it to be initially hidden because it will be empty. Then when the user clicks on any tab I want to open it to show the route content. I also want that if the user clicks the same tab that is displayed on the left drawer to close the drawer. Is this possible? If so, how ?

Thanks in advance

[benoitranque]

it is possible, although the proper way to do what you want to achieve is with animations, the drawer is for menus. Note that on touch devices the drawer can be dismissed by swiping.

To do what you need you would need to access the reference to your layout

<q-layout ref="layout" view="hHr LpR lFf" :right-breakpoint="1100">
  <!-- Navigation -->
  <q-tabs slot="navigation">
    <q-route-tab slot="title" @click="$refs.layout.toggleLeft()" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
  </q-tabs>
  <!-- Left Side Panel -->
  <div slot="left">
    <!-- sub-routes get injected here: -->
    <router-view />
  </div>
</q-layout>

[danielo515]

Hello @benoitranque
Thanks for your answer.
I tried your solution but it does not work. The tab is navigated, but the slot-left is not toggled. If I add a single button, then it is toggled with no problem (but then I can not use tab navigation!)
I’m not sure what do you mean with this:

@benoitranque said in Make q-tabs toggle drawer:

although the proper way to do what you want to achieve is with animations, the drawer is for menus.

What do you mean exactly ? That I should use just a column and toggle it in-out with animations and modifying it’s properties ? like width 0 and that kind of thing ?
I wanted to use the drawer because it has built-in method to be hidden/showed, it’s fixed by default and it looked the right choice. However, I’m open to any other option

[danielo515]

Another related question: if I want the drawer to start collapsed and to show up when the first tab is selected, how should I setup it ?
Thanks again