From a00206499bd7cd0178ec35a14374466bd1a8b15c Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 11 Mar 2020 17:54:47 +0100
Subject: [PATCH] Close sidebar on click outside of it

---
 client/src/components/profile/ProfileSidebar.vue |  3 +--
 client/src/mixins/open-sidebar.js                | 12 +++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index c3cbd008..1ed94a3d 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-sidebar" v-if="sidebar.open">
+  <div class="profile-sidebar" v-if="sidebar.open" v-click-outside="closeSidebar">
     <a class="profile-sidebar__close-link" @click="closeSidebar">
       <cross class="profile-sidebar__close-icon"></cross>
     </a>
@@ -55,7 +55,6 @@
         });
       }
     },
-
   }
 </script>
 
diff --git a/client/src/mixins/open-sidebar.js b/client/src/mixins/open-sidebar.js
index 755c3837..ffaba465 100644
--- a/client/src/mixins/open-sidebar.js
+++ b/client/src/mixins/open-sidebar.js
@@ -3,11 +3,13 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 export default {
   methods: {
     openSidebar() {
-      this.$apollo.mutate({
-        mutation: TOGGLE_SIDEBAR,
-        variables: {
-          open: true
-        }
+      this.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
+        this.$apollo.mutate({
+          mutation: TOGGLE_SIDEBAR,
+          variables: {
+            open: true
+          }
+        });
       });
     },
   },