vue.js - How to default navigation drawer to closed on mobile and open on desktop?

Question

Im using the quasar framework for vue js. I have a sliding nav drawer. I am struggling to get its open/closed state to behave properly on mobile/desktop.

My requirements:

• Drawer default open when screen size > 1023 pixels
• When screen size > 1023 pixels, provide option to put drawer into mini mode via button (which is a compressed version of the drawer serving as a visual indicator it exists to the user)
• When screen < 1023 pixels, drawer should be in mobile mode(i.e. requires a swipe gesture from left to right to display it).

I can accomplish the first two bullet points above, but when I'm on a mobile device I can't seem to get the drawer to start hidden on page load. When the page loads, the drawer is in open state. The drawer should only be in open state on mobile if the user opens it themselves.

Here is what I have tried:

<q-drawer
  v-model="rightDrawer"
  side="right"
  :mini="miniStateRight"
  :width="350"
  :breakpoint="1023"
  bordered
  overlay
  content-class="bg-grey-3"
>
  <q-page-sticky class="gt-sm" position="left" :offset="[-15, 0]">
    <q-btn
      @click="miniStateRight = !miniStateRight"
      round
      color="primary"
      size="sm"
      icon="mdi-feature-search-outline"
    />
  </q-page-sticky>
</q-drawer>

data: () => ({
  rightDrawer: true,
  miniStateRight: false,
}),

How can I get the drawer to default to the closed position on page load when the screen is < 1023 pixels? I have access to the current screen width via $q.screen.width plugin.

Many thanks in advance.

Answer 1

You can just set the drawer value to true or false in data by comparing screen width.

Example - drawer: this.$q.screen.width < 1023?false:true,

Working codepen - https://codepen.io/Pratik__007/pen/poELqgK