QDrawer - Set width based on breakpoint

[nniclas]

Is there a way to set another width for small screens?
My use case is I need a fixed width for desktop and 100% width (:width="$q.screen.width) for mobile.

It seems this cannot be done with media queries?

[Allan-EN-GB]

Take a look at the docs: https://quasar.dev/layout/drawer#QDrawer-API

Look for breakpoint, show-if-above is also relevant.

[nniclas]

As i understand it, :breakpoint defines from where mobile mode is active but is it possible to set full width in mobile mode only?

[Allan-EN-GB]

Set the drawer to full width? AFAIK it’s already only full width on mobile …

[metalsadman]

@nniclas get the width of your viewport store it in a data model and use that in qdrawer’s width prop. Computed prop should work too. https://quasar.dev/quasar-utils/dom-utils#Get-Height-%2F-Width or this to get sizes of screen or element https://quasar.dev/vue-components/resize-observer#Introduction.

[nniclas]

@Allan-EN-GB so I thought, but actually not setting the :width will default the drawer to 300px regardless. (using v1.1.0)
you are able to use :width="$q.screen.width for full screen width
my issue is that it would be nice to set the width from a condition based on screen size

@metalsadman thanks seems like a good pointer, I will look into this

[Allan-EN-GB]

Can’t you just do: :width="$q.platform.is.desktop ? '300px' : $q.screen.width"

If it needs to be more complicated then you can use Aldrins suggestion.

[nniclas]

That will suffice for this case, I was not aware it was this easy to use conditionals in a view, thank you!