Close sidebar on click outside of it

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>
 

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
+          }
+        });
       });
     },
   },