From 7a23f3b0d2ac512055da954ecb038560564f7a80 Mon Sep 17 00:00:00 2001
From: Marcel Klehr <mklehr@gmx.net>
Date: Thu, 3 Nov 2022 18:19:23 +0100
Subject: [PATCH] Fix click-outside for sidebar

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
---
 src/App.vue                | 7 +------
 src/components/Sidebar.vue | 8 +++++++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 862dc9d3b..ec1d06d85 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@
 <template>
 	<NcContent app-name="deck" :class="{ 'nav-hidden': !navShown, 'sidebar-hidden': !sidebarRouterView }">
 		<AppNavigation />
-		<NcAppContent @click="clickCloseSidebar()">
+		<NcAppContent>
 			<router-view />
 		</NcAppContent>
 
@@ -122,11 +122,6 @@ export default {
 		hideModal() {
 			this.$router.push({ name: 'board' })
 		},
-		clickCloseSidebar() {
-			if (this.sidebarShown) {
-				this.$router.push({ name: 'board' })
-			}
-		},
 	},
 }
 </script>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index ca8c77196..0d7b5d59e 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<router-view v-if="visible" name="sidebar" />
+	<router-view v-if="visible" v-click-outside="onClickOutside" name="sidebar" />
 </template>
 
 <script>
@@ -37,6 +37,12 @@ export default {
 		closeSidebar() {
 			this.$router.push({ name: 'board' })
 		},
+	  onClickOutside(e) {
+		  if (Array.from(document.querySelectorAll('.card')).some(node => node.contains(e.target))) {
+				return
+			}
+			this.closeSidebar()
+		},
 	},
 }
 </script>