feat: mini-drawer

src/layouts/MainLayout.vue

@@ -169,22 +169,25 @@ onMounted(async () => {
 
 <template>
   <q-layout view="lHh Lpr lFf">
-    <drawer-component v-model:left-drawer-open="leftDrawerOpen" />
+    <drawer-component :mini="!leftDrawerOpen" />
 
     <q-page-container>
       <!-- drawer control -->
       <div
-        style="position: relative; z-index: 9999"
+        style="position: relative; z-index: 1000"
         :hidden="$q.screen.lt.md && leftDrawerOpen"
       >
-        <q-avatar
+        <div
           size="36px"
           style="
             position: absolute;
+            border-radius: 50%;
             top: 28px;
-            left: -18px;
+            left: -22px;
             background-color: var(--surface-1);
+            border: 4px solid var(--surface-1);
           "
+          class="flex items-center justify-center"
         >
           <q-btn
             flat
@@ -205,7 +208,7 @@ onMounted(async () => {
               style="color: hsl(var(--negative-bg))"
             />
           </q-btn>
-        </q-avatar>
+        </div>
       </div>
 
       <div