From 2c178451694d2206d98238c2361a78180b9dbb88 Mon Sep 17 00:00:00 2001
From: Philipp Fischbeck <pfischbeck@googlemail.com>
Date: Fri, 7 Jan 2022 22:09:34 +0100
Subject: [PATCH] Fix double click on sidebar on smaller screens (#906)

The problem was that on smaller screens or when resizing, v-navigation-drawer would change its value on its own, but these changes were not propagated to AppSidebar.
I also added a few missing type definitions for SidebarLinks.
---
 frontend/components/Layout/AppSidebar.vue | 38 +++++++++++++++--------
 frontend/layouts/admin.vue                |  6 ++--
 frontend/types/application-types.ts       |  4 ++-
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/components/Layout/AppSidebar.vue b/frontend/components/Layout/AppSidebar.vue
index 1ce8879572c2..b8b0bdfeea39 100644
--- a/frontend/components/Layout/AppSidebar.vue
+++ b/frontend/components/Layout/AppSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer class="d-flex flex-column d-print-none" :value="value" clipped app width="240px">
+  <v-navigation-drawer v-model="drawer" class="d-flex flex-column d-print-none" clipped app width="240px">
     <!-- User Profile -->
     <template v-if="$auth.user">
       <v-list-item two-line to="/user/profile" exact>
@@ -124,9 +124,9 @@
     </template>
   </v-navigation-drawer>
 </template>
-  
+
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
 import { SidebarLinks } from "~/types/application-types";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 
@@ -162,20 +162,32 @@ export default defineComponent({
       default: null,
     },
   },
-  setup() {
-    return {};
-  },
-  data() {
-    return {
+  setup(props, context) {
+    // V-Model Support
+    const drawer = computed({
+      get: () => {
+        return props.value;
+      },
+      set: (val) => {
+        context.emit("input", val);
+      },
+    });
+
+    const state = reactive({
       dropDowns: {},
-      topSelected: null,
-      secondarySelected: null,
-      bottomSelected: null,
-    };
+      topSelected: null as string[] | null,
+      secondarySelected: null as string[] | null,
+      bottomSelected: null as string[] | null,
+    });
+
+    return {
+      ...toRefs(state),
+      drawer,
+    }
   },
 });
 </script>
-  
+
 <style>
 @media print {
   .no-print {
diff --git a/frontend/layouts/admin.vue b/frontend/layouts/admin.vue
index ae950c0eb32d..c78b2be4005e 100644
--- a/frontend/layouts/admin.vue
+++ b/frontend/layouts/admin.vue
@@ -7,7 +7,6 @@
       :bottom-links="bottomLinks"
       :user="{ data: true }"
       :secondary-header="$t('user.admin')"
-      @input="sidebar = !sidebar"
     />
 
     <TheSnackbar />
@@ -31,6 +30,7 @@ import { defineComponent, ref, useContext, onMounted } from "@nuxtjs/composition
 import AppHeader from "@/components/Layout/AppHeader.vue";
 import AppSidebar from "@/components/Layout/AppSidebar.vue";
 import TheSnackbar from "~/components/Layout/TheSnackbar.vue";
+import { SidebarLinks } from "~/types/application-types";
 
 export default defineComponent({
   components: { AppHeader, AppSidebar, TheSnackbar },
@@ -45,7 +45,7 @@ export default defineComponent({
       sidebar.value = !$vuetify.breakpoint.md;
     });
 
-    const topLinks = [
+    const topLinks: SidebarLinks = [
       {
         icon: $globals.icons.viewDashboard,
         to: "/admin/dashboard",
@@ -105,7 +105,7 @@ export default defineComponent({
       },
     ];
 
-    const bottomLinks = [
+    const bottomLinks: SidebarLinks = [
       {
         icon: $globals.icons.heart,
         title: i18n.t("about.support"),
diff --git a/frontend/types/application-types.ts b/frontend/types/application-types.ts
index 39b4f537988b..36e53116fc4d 100644
--- a/frontend/types/application-types.ts
+++ b/frontend/types/application-types.ts
@@ -2,8 +2,10 @@ import { TranslateResult } from "vue-i18n";
 
 export interface SideBarLink {
   icon: string;
-  to: string;
+  to?: string;
+  href?: string;
   title: TranslateResult;
+  children?: SideBarLink[];
 }
 
 export type SidebarLinks = Array<SideBarLink>;