feat(QDrawer): add prop to disable mini animation

ui/dev/src/pages/layout/layout-drawer-mini.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="q-layout-padding">
+    <q-toggle v-model="disableMiniAnimation">
+      Disable mini animation
+    </q-toggle>
+    <q-toggle v-model="miniToOverlay">
+      Mini to overlay
+    </q-toggle>
+
+    <q-layout view="hHh lpr fFf" container :style="containerStyle" class="q-mt-xl shadow-2">
+      <q-header class="bg-black">
+        <q-toolbar>
+          <q-btn flat @click="miniState = !miniState" round dense icon="menu" />
+          <q-toolbar-title>Header</q-toolbar-title>
+        </q-toolbar>
+      </q-header>
+
+      <q-drawer
+        side="left"
+        :model-value="true"
+        :mini="miniState"
+        :mini-to-overlay="miniToOverlay"
+        :width="200"
+        :disable-mini-animation="disableMiniAnimation"
+        :breakpoint="0"
+        bordered
+      >
+      <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
+          <q-list padding>
+            <q-item clickable v-ripple>
+              <q-item-section avatar>
+                <q-icon name="inbox" />
+              </q-item-section>
+
+              <q-item-section>
+                Inbox
+              </q-item-section>
+            </q-item>
+
+            <q-item active clickable v-ripple>
+              <q-item-section avatar>
+                <q-icon name="star" />
+              </q-item-section>
+
+              <q-item-section>
+                Star
+              </q-item-section>
+            </q-item>
+
+            <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-item clickable v-ripple>
+              <q-item-section avatar>
+                <q-icon name="drafts" />
+              </q-item-section>
+
+              <q-item-section>
+                Drafts
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-scroll-area>
+      </q-drawer>
+
+      <q-page-container>
+        <q-page padding>
+          <div v-for="n in contentSize" :key="n">
+            My page My page My page My page My page My page
+            My page My page My page My page My page My page {{ n }} / {{ contentSize }}
+          </div>
+        </q-page>
+      </q-page-container>
+    </q-layout>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      miniState: true,
+      miniToOverlay: true,
+      width: 1030,
+      contentSize: 30,
+      disableMiniAnimation: false
+    }
+  },
+
+  computed: {
+    containerStyle () {
+      return {
+        height: '800px',
+        width: this.width + 'px'
+      }
+    }
+  }
+}
+</script>

ui/src/components/drawer/QDrawer.js

@@ -41,6 +41,7 @@ export default createComponent({
       type: Number,
       default: 57
     },
+    disableMiniAnimation: Boolean,
 
     breakpoint: {
       type: Number,
@@ -417,6 +418,7 @@ export default createComponent({
     watch(() => $q.lang.rtl, () => { applyPosition() })
 
     watch(() => props.mini, () => {
+      if (props.disableMiniAnimation) return
       if (props.modelValue === true) {
         animateMini()
         $layout.animate()

ui/src/components/drawer/QDrawer.json

@@ -108,6 +108,13 @@
       "type": "Boolean",
       "desc": "Disables the default behavior where drawer backdrop can be swiped",
       "category": "behavior"
+    },
+
+    "disable-mini-animation": {
+      "type": "Boolean",
+      "desc": "Disables animation of the drawer when toggling mini mode",
+      "category": "behavior",
+      "addedIn": "v2.11.11"
     }
   },