src/components/utils/IsoDateInput.vue

@@ -11,7 +11,7 @@
     @clear="dateTime = ''"
   >
     <template #append>
-      <q-icon v-if="'date' || type == 'datetime'" name="event" class="cursor-pointer">
+      <q-icon v-if="'date' || type == 'datetime'" name="mdi-calendar" class="cursor-pointer">
         <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
           <q-date v-model="date" mask="YYYY-MM-DD">
             <div class="row items-center justify-end">

src/components/utils/PasswordInput.vue

@@ -25,7 +25,7 @@ export default defineComponent({
   setup(props, { emit, attrs }) {
     const isPassword = ref(true);
     const type = computed(() => (isPassword.value ? 'password' : 'text'));
-    const name = computed(() => (isPassword.value ? 'visibility_off' : 'visibility'));
+    const name = computed(() => (isPassword.value ? 'mdi-eye-off' : 'mdi-eye'));
     const password = computed({
       get: () => props.modelValue,
       set: (value: string) => emit('update:modelValue', value),

src/layouts/MainLayout.vue

@@ -1,15 +1,8 @@
 <template>
-  <q-layout view="hHh lpr lFf">
+  <q-layout view="hHh Lpr lff">
     <q-header elevated class="bg-primary text-white">
       <q-toolbar>
-        <q-btn
-          v-if="!leftDrawerOpen"
-          dense
-          flat
-          round
-          icon="menu"
-          @click="leftDrawerOpen = !leftDrawerOpen"
-        />
+        <q-btn dense flat round icon="mdi-menu" @click="openMenu" />
 
         <q-toolbar-title>
           <router-link :to="{ name: 'dashboard' }" style="text-decoration: none; color: inherit">
@@ -50,12 +43,11 @@
     </q-header>
 
     <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
+      v-model="leftDrawer"
       side="left"
       bordered
       :mini="leftDrawerMini"
-      @click.capture="leftDrawerClicker"
+      @click.capture="openMenu"
     >
       <!-- Plugins -->
       <q-list>
@@ -66,28 +58,13 @@
         />
         <q-separator />
         <!-- Plugin functions -->
-
         <essential-link
           v-for="(entry, index) in subLinks"
           :key="'childPlugin' + index"
           :entry="entry"
         />
       </q-list>
-
-      <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -11px">
-        <q-btn
-          size="sm"
-          dense
-          round
-          unelevated
-          color="secondary"
-          icon="mdi-menu-left"
-          @click="leftDrawerMini = true"
-        />
-      </div>
-
       <q-separator />
-
       <essential-link
         v-for="(entry, index) in essentials"
         :key="'essential' + index"
@@ -126,7 +103,7 @@ export default defineComponent({
     const router = useRouter();
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
-    const leftDrawer = ref(false);
+    const leftDrawer = ref(true);
     const leftDrawerMini = ref(false);
     const shortcuts = flaschengeist?.shortcuts || [];
     const mainLinks = flaschengeist?.menuLinks || [];
@@ -135,25 +112,27 @@ export default defineComponent({
     const useNative = 'Notification' in window && window.Notification !== undefined;
     const noPermission = ref(!useNative || window.Notification.permission !== 'granted');
 
+    const subLinks = computed(() => {
+      const matched = router.currentRoute.value.matched[1];
+      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
+    });
+
     onBeforeMount(() => {
       polling.value = window.setInterval(() => pollNotification(), config.pollingInterval);
       pollNotification();
     });
     onBeforeUnmount(() => window.clearInterval(polling.value));
 
-    const leftDrawerOpen = computed({
-      get: () => (leftDrawer.value || Screen.gt.sm ? true : false),
-      set: (val: boolean) => (leftDrawer.value = val),
-    });
-
-    const subLinks = computed(() => {
-      const matched = router.currentRoute.value.matched[1];
-      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
-    });
-
-    function leftDrawerClicker() {
-      if (leftDrawerMini.value) {
+    function openMenu(event: { target: HTMLInputElement }) {
+      if (event.target.nodeName === 'DIV') leftDrawerMini.value = false;
+      else {
+        if (!leftDrawer.value || leftDrawerMini.value) {
+          leftDrawer.value = true;
           leftDrawerMini.value = false;
+        } else {
+          leftDrawerMini.value = Screen.gt.sm && !leftDrawerMini.value;
+          leftDrawer.value = leftDrawerMini.value;
+        }
       }
     }
 
@@ -188,13 +167,13 @@ export default defineComponent({
 
     return {
       essentials,
-      leftDrawerOpen,
+      leftDrawer,
       leftDrawerMini,
-      leftDrawerClicker,
       logout,
       mainLinks,
       notifications,
       noPermission,
+      openMenu,
       remove,
       requestPermission,
       shortcuts,