Drawer - Always enable hiding

[Xemoka]

Hello,

Inspired by previous drawer discussion, I’m curious if there’s a way to allow for a toggle of drawers when in large screen mode—not just when in mobile / small screen mode. I know of the ‘swipe-only’ attribute, however it would be nice to have it shown on screen and optionally hidden by button click (without using v-show and leveraging the animations already setup).

I understand this might be a niche request, I wouldn’t be opposed to creating a custom component from the drawer.

Thanks for your work, this is an excellent tool,
Justin

[keithjeb]

That should be easy to do - just use the standard show/hide buttons & avoid setting the CSS class. Alternatively you could set the new variable to like 2000px or something

[rstoenescu]

@Xemoka Hi, maybe the name “swipe-only” is misleading, but kept along the time for backwards compatibility. You can still use a button to open/close it just like you would with a “normal” drawer. Take a look at button from top right from http://quasar-framework.org/quasar-play/android/index.html#/showcase/layout/drawer – source here: https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/layout/layout.vue

Is this what you were looking for?

[Xemoka]

That is what I am doing currently, however I would like it to be shown as a regular drawer, such as the one on the left in that example, but be able to be toggled in and out—I’m building a mapping app and putting a layer list in the drawer. It’s great on mobile since the drawer isn’t shown by default, but on desktop it’d be nice to be able to get it to hide from a shown position. Calling .open() / .close() on it when it’s not swipe-only doesn’t produce a desirable effect.

Similar to the left drawer in your example with the ability to toggle it off.

[keithjeb]

I think I know what you mean and have code for that in my current app (although I do it on the right not the left). Posting to remind me to post it up later

[dlevin]

I worked around this by adding $drawer-screen-width-threshold = 9000px in themes/app.mat.styl

The drawer will always be hidden and the button to toggle it will always be visible (on resolutions lower than 9000px wide)

[ninafar]

hi guys . any solutions ? i need to hide the drawer on dekstop view . breakpoint doesnt seems to work

[smoke]

data() {
return {
leftDrawerOpen: !this.$q.screen.lt.sm
}
…
onSelect(item) {
this.leftDrawerOpen = !this.$q.screen.lt.sm
…
}