src/layouts/MainLayout.vue

@@ -2,7 +2,7 @@
   <q-layout view="hHh Lpr lff">
     <q-header elevated class="bg-primary text-white">
       <q-toolbar>
-        <q-btn dense flat round icon="mdi-menu" @click="openMenu" />
+        <q-btn dense flat round icon="mdi-menu" @click="openMenu(true)" />
 
         <q-toolbar-title>
           <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
@@ -56,32 +56,44 @@
       side="left"
       bordered
       :mini="leftDrawerMini"
-      @click.capture="openMenu"
+      @click.capture="openMenuMini"
     >
       <!-- Plugins -->
-      <essential-expansion-link
-        v-for="(entry, index) in mainLinks"
-        :key="'plugin' + index"
-        :entry="entry"
-        @add-short-cut="addShortcut"
-      />
-      <q-separator />
-      <essential-link
-        v-for="(entry, index) in essentials"
-        :key="'essential' + index"
-        :entry="entry"
-      />
-      <div v-if="platform.is.capacitor">
+      <q-scroll-area class="fit">
+        <essential-expansion-link
+          v-for="(entry, index) in mainLinks"
+          :key="'plugin' + index"
+          :entry="entry"
+          @add-short-cut="addShortcut"
+        />
         <q-separator />
-        <q-item clickable tag="a" target="self" @click="logout">
-          <q-item-section avatar>
-            <q-icon name="mdi-exit-to-app" />
-          </q-item-section>
+        <essential-link
+          v-for="(entry, index) in essentials"
+          :key="'essential' + index"
+          :entry="entry"
+        />
+        <div v-if="platform.is.capacitor">
+          <q-separator />
+          <q-item clickable tag="a" target="self" @click="logout">
+            <q-item-section avatar>
+              <q-icon name="mdi-exit-to-app" />
+            </q-item-section>
 
-          <q-item-section>
-            <q-item-label>Logout</q-item-label>
-          </q-item-section>
-        </q-item>
+            <q-item-section>
+              <q-item-label>Logout</q-item-label>
+            </q-item-section>
+          </q-item>
+        </div>
+      </q-scroll-area>
+      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
+        <q-btn
+          dense
+          round
+          unelevated
+          color="accent"
+          icon="mdi-chevron-left"
+          @click="openMenuMini(true)"
+        />
       </div>
     </q-drawer>
     <q-page-container>
@@ -125,7 +137,7 @@ export default defineComponent({
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
     const leftDrawer = ref(!Platform.is.mobile);
-    const leftDrawerMini = ref(false);
+    const leftDrawerMini = ref(true);
     const mainLinks = flaschengeist?.menuLinks || [];
     const notifications = computed(() => mainStore.notifications.slice().reverse());
     const polling = ref(NaN);
@@ -138,9 +150,11 @@ export default defineComponent({
       void mainStore.getShortcuts();
     });
     onBeforeUnmount(() => window.clearInterval(polling.value));
-
+    /*
     function openMenu(event: { target: HTMLInputElement }) {
-      if (event.target.nodeName === 'DIV') leftDrawerMini.value = false;
+      console.log(event.target.nodeName);
+      if (event.target.nodeName === 'DIV' || event.target.nodeName === 'I')
+        leftDrawerMini.value = false;
       else {
         if (!leftDrawer.value || leftDrawerMini.value) {
           leftDrawer.value = true;
@@ -151,7 +165,13 @@ export default defineComponent({
         }
       }
     }
-
+*/
+    function openMenu(value = !leftDrawer.value) {
+      leftDrawer.value = value;
+    }
+    function openMenuMini(value = !leftDrawerMini.value) {
+      leftDrawerMini.value = value;
+    }
     function logout() {
       void router.push({ name: 'login', params: { logout: 'logout' } });
       void mainStore.logout();
@@ -214,6 +234,7 @@ export default defineComponent({
       notifications,
       noPermission,
       openMenu,
+      openMenuMini,
       remove,
       requestPermission,
       useNative,