How to tell if drawer is in overlay mode?

CWoodman

I need to know whether a drawer is in overlay mode so other elements can be set correctly.
I’ve set the breakpoint to 1200 and tried to determine if overlay is true by sensing the window width, but there seems to be a few pixels of uncertainty - the drawer seems to switch into overlay at about 1185 instead of 1200.
Is there a more precise way to check whether overlay mode is in effect?

CWoodman

I think I found it:
<q-drawer ref=“drawer”

then:
this.$refs.drawer.belowBreakpoint is true or false

CWoodman

Nope. If I call this.$refs.drawer.belowBreakpoint my app freezes!
Best I’ve been able to do is this kludge:
const overlay = this.windowWidth < (this.breakpoint - 16) // Trial and error: breakpoint is not accurate

dobbel

@CWoodman

you could control the overlay mode instead:
https://codepen.io/ontwikkelfabriek/pen/dyXBmVM

not the same as detecting overlay mode…

CWoodman

Interesting. What does setting the breakpoint do then?

dobbel

@CWoodman

breakpoint
Type: Number
Breakpoint (in pixels) of layout width up to which mobile mode is used

dobbel

@CWoodman

If you set breakpoint to 0 then the drawer will never enter overlay mode by itself. So you can control it yourself when it has to go into overlay mode.

See codepen

CWoodman

Sorry, but I’m confused…
What’s the difference between ‘mobile’ mode and ‘overlay’ mode?

dobbel

@CWoodman

mobile means it is in overlay mode… I think

CWoodman

OK. Thanks again for your help. Really appreciate it when I get stuck!

dobbel

@CWoodman

I would love to see the result of what you’re making. A backend for a soap shop right?

CWoodman

No, it’s an app for soap-makers. Inventory control, recipe creation, customer invoicing, etc. Replacement for old VB app.
Website: www.soapmaker.ca
Prototype: www.woodman.ca/SM4Quasar (only the ‘supplies’ command center does anything so far)

dobbel

@CWoodman

Ah yes that’s right soap maker. I am impressed, this must be the most complex UI made in Quasar I have seen so far. I can even see some of my ‘dirty’ solutions

Is it intended to be used with mobile? Must me a nightmare to make this fully mobile responsive/useable even with Quasar. Especially with all those tabs.

Succes!

CWoodman

So far it seems to work fine on my phone. I suppressed the tab splitting feature on a small screen. That was by far the most complex thing to build so far. Dragging a tab from one split to another meant having to re-build the tab’s content completely from the store so it appears to be unchanged.

Are you a member of the Quasar development team? You seem very knowledgeable about it.

beets

That’s looking really cool so far @CWoodman !

CWoodman

@beets Thanks. Still a long way to go!

beets

@CWoodman Yup, I bet. I’m sure your customers will appreciate a web app though. Even better if you also package it as a PWA, Electron app, or mobile app.

dobbel

@CWoodman

Especially PWA I think is very useful, mostly for the auto update client feature. No more js caching issues so every client is always on the latest version.

Are you a member of the Quasar development team?

No, I just try to help people here on the forum from time to time.

CWoodman

Hoping to do a PWA if I can figure out how.

No More Posting New Topics!

How to tell if drawer is in overlay mode?