From 2f9fd3a03dff0b2c00ffd64986e66e5db862b7aa Mon Sep 17 00:00:00 2001
From: alsahawneh <marina.alsahawneh@gmail.com>
Date: Thu, 30 Jun 2022 06:48:43 +0300
Subject: [PATCH] Close the menu when users click anywhere else in the page

---
 components/Elements/Dropdown.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/Elements/Dropdown.vue b/components/Elements/Dropdown.vue
index ae0bded..78f41f3 100644
--- a/components/Elements/Dropdown.vue
+++ b/components/Elements/Dropdown.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="dropdown">
     <div class="dropdown-link">
-      <button class="dropdown-button" v-if="show" key="on" @click="show = false">
-        <i class="ri-close-fill"></i>
-      </button>
-      <button class="dropdown-button" v-else key="off" @click="show = true">
-        <i class="ri-list-settings-fill"></i>
+      <button class="dropdown-button" @click="show = !show">
+        <i class="ri-close-fill" v-if="show"></i>
+        <i class="ri-list-settings-fill" v-else></i>
       </button>
       <h4 @click="show = !show" class="flex-grow ltr:ml-4 rtl:mr-4">{{ getTitle }}</h4>
     </div>
@@ -41,10 +39,21 @@
         required: true
       }
     },
+    mounted() {
+      this.$nuxt.$on('routeChanged', () => {
+        this.show = false
+      })
+      document.addEventListener('click', this.closeMenu)
+    },
     methods: {
       setActive(value, title) {
         this.show = false
         this.$emit('setActive', value, title)
+      },
+      closeMenu(e) {
+        if (!this.$el.contains(e.target)) {
+          this.show = false
+        }
       }
     },
     computed: {
@@ -120,4 +129,4 @@
     transform: translateY(30px);
   }
 
-</style>
+</style>
\ No newline at end of file