ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Close sidebar on click outside of it

This commit is contained in:
Ramon Wenger 2020-03-11 17:54:47 +01:00
parent c1341a8ac9
commit a00206499b
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/profile/ProfileSidebar.vue
View File

@ -1,5 +1,5 @@
<template> <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"> <a class="profile-sidebar__close-link" @click="closeSidebar">
<cross class="profile-sidebar__close-icon"></cross> <cross class="profile-sidebar__close-icon"></cross>
</a> </a>
@ -55,7 +55,6 @@
}); });
} }
}, },
} }
</script> </script>

12
client/src/mixins/open-sidebar.js
View File

@ -3,11 +3,13 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
export default { export default {
methods: { methods: {
openSidebar() { openSidebar() {
this.$apollo.mutate({ this.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
mutation: TOGGLE_SIDEBAR, this.$apollo.mutate({
variables: { mutation: TOGGLE_SIDEBAR,
open: true variables: {
} open: true
}
});
}); });
}, },
}, },