Quasar: Drawer changes to automatically Mini-mode - vue.js

Question

I am using Quasar, and I would like the drawer changes into mini mode automatically whenever the browser gets smaller by users. For now, it's always opened even I narrows the browser.
It's what I tried below:
<q-drawer
v-model="drawer"
show-if-above
:mini="!drawer || miniState"
#click.capture="drawerClick"
:width="220"
:breakpoint="500"
bordered
:content-style="{ backgroundColor: '#f5f7f9' }"
>
<q-scroll-area class="fit">
<q-list padding>
<q-btn
v-if="!miniState"
flat
left
#click="miniState = !miniState"
class="logo-btn"
>
<img
src="~assets/os_logo.png"
width="144px"
height="24px"
contain
/>
</q-btn>
<q-btn v-else flat left #click="miniState = !miniState">
<img src="~assets/os_logo_no_text.png" width="24px" contain />
</q-btn>
<!-- MENU -->
<q-expansion-item
default-opened
v-for="(menu, index) in menus"
:style="index === 0 && 'margin-top: 27px'"
:icon="menu.icon"
:label="menu.title"
:key="menu.id"
:expand-icon="menu.subMenus.length === 0 ? 'none' : ''"
header-class="header-bg text-black"
expand-icon-class="text-gray"
>
<q-expansion-item
v-for="(sub, index) in menu.subMenus"
:key="index"
:label="sub.title"
expand-icon="none"
class="sub-content"
:to="{ name: sub.link }"
/>
</q-expansion-item>
</q-list>
</q-scroll-area>
</q-drawer>
And the script code below :
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
// name: 'ComponentName'
data() {
return {
drawer: false,
miniState: false,
},
computed: { // <-- I tried this one..
miniState() {
if (window.innerWidth < 600) {
return (this.miniState = true);
}
}
},
});
</script>
I have also checked this answers here : How to default navigation drawer to closed on mobile and open on desktop?
But this is not really what I am aiming for since the mode of drawer gets stuck and not changes responsively. Any suggestions?

Answer 1

In your code you have made several mistakes;
You are repeating your data property miniState as a computed property. The miniState property inside the data function will override the computed property; thus it will always be false
You are not returning a value from your computed property; instead you are only assigning.
Still; window properties such as innerWidth is not reactive and watchable in Vue. Please correct me if I am wrong. Thus, watching window.innerWidth will not trigger every time the window is resized.
Since you are using Quasar, you can make use of the the screen plugin which comes with Quasar. You dont have to install anything, the screen plugin is installed by default. Here is the link to the docs.
I have put below a very minimal example of the code with the functionality you required. This is not the code you have put in your post above. I extracted the drawer and the content from the Quasar documentation here
Now the drawer will automatically go into mini mode when the screen size is below 500 px; this is of course configurable.
Also; on a side note, if you are only starting with Vue and Quasar, Vue is now upgraded to Vue3 which comes with the composition api. Quasar is also being upgraded to version 2 which supports Vue3.
Follow the comments below and you will understand the code!
new Vue({
el: '#q-app',
data: function() {
return {
drawer: true,
// using a property to track when to show the mini drawer: this way is easy to maintain.
switchToMini: 500
}
},
computed: {
// use ministate as a computed property
miniState: function() {
// use the screen plugin of Quasar -> this is very handy
return this.$q.screen.width < this.switchToMini
// you can do better and compare agains Quasars default breakpoints; following code checks whether the current screen size is 'sm'. You can comapare against 'xs', 'sm', 'md', 'lg' and 'xl'
// return this.$q.screen.name === "sm"
}
}
})
<!-- quasar and vue includes -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>
<!-- end of includes -->
<!-- app -->
<div id="q-app">
<template>
<div class="q-pa-md">
<q-layout view="hHh Lpr lff" container style="height: 300px" class="shadow-2 rounded-borders">
<q-header elevated class="bg-black">
<q-toolbar>
<q-toolbar-title>Header</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer
v-model="drawer"
show-if-above
:mini="miniState"
:breakpoint="200"
:width="200"
bordered
class="bg-grey-3"
>
<q-scroll-area class="fit">
<q-list padding>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="send" />
</q-item-section>
<q-item-section>
Send
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</q-drawer>
<q-page-container>
<q-page padding>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci, dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus commodi perferendis voluptate?
</p>
</q-page>
</q-page-container>
</q-layout>
</div>
</template>
</div>