From ee66df3827baa79dca45f8a0e146d7f41b669ffd Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 29 Jan 2024 22:59:41 +0530
Subject: [PATCH] fix: close notification panel if click outside

---
 .../src/components/Layouts/AppSidebar.vue     |  1 +
 frontend/src/components/Notifications.vue     | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 10f9c859..86e12133 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -9,6 +9,7 @@
     <div class="flex-1 overflow-y-auto">
       <div class="mb-3 flex flex-col">
         <SidebarLink
+          id="notifications-btn"
           label="Notifications"
           :icon="NotificationsIcon"
           :isCollapsed="isSidebarCollapsed"
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index 762028ed..ccb4bc7a 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -72,11 +72,24 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import { notificationsStore } from '@/stores/notifications'
 import { globalStore } from '@/stores/global'
 import { timeAgo } from '@/utils'
-import { computed } from 'vue'
-import { FeatherIcon } from 'frappe-ui'
+import { onClickOutside } from '@vueuse/core'
+import { ref, computed } from 'vue'
 
 const isSidebarCollapsed = computed(() => globalStore().isSidebarCollapsed)
 
+const target = ref(null)
+onClickOutside(
+  target,
+  () => {
+    if (notificationsStore().visible) {
+      toggleNotificationPanel()
+    }
+  },
+  {
+    ignore: ['#notifications-btn'],
+  }
+)
+
 function toggleNotificationPanel() {
   notificationsStore().toggle()
 }
@@ -97,7 +110,7 @@ function getRoute(notification) {
   return {
     name: notification.route_name,
     params: params,
-    hash: "#" + notification.comment,
+    hash: '#' + notification.comment,
   }
 }
 </script>