The Breakpoint

If you’ve played with the layout in desktop mode, you might notice how the left and right sides / drawers magically hide, as you decrease the screen width. This is part of the smart responsiveness designed into Quasar’s layout component.

If you’d like to control how the left and right side / drawers work, you have a prop called breakpoint on each QLayoutDrawer. This value represents the minimum size of the screen in pixels, before the Drawer is forced to float above the Layout. This is a fantastic and important function in maximizing screen real estate for smaller devices.

TipAlso take a look at the behavior property if you want the Drawer to act only as on a narrow screen or only as on a wide screen, effectively disable the breakpoint.

Using v-model

There’s the possibility to use v-model to control the state of Drawer (opened/showing and closed/hidden).