Improve Dropdown

assets/styles/main.scss

@@ -126,3 +126,23 @@ hr {
   background-color: $color-neutral-80;
   height: 1px !important;
 }
+
+#overlay {
+  display: block;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  transition-delay: 50ms;
+
+  .dropdown-open & {
+    opacity: 1;
+    transition-delay: 0;
+  }
+}

components/Dropdown.vue

@@ -36,6 +36,27 @@ export default {
       isPopoverOpen: false
     }
   },
+  watch: {
+    isPopoverOpen: {
+      immediate: true,
+      handler(isOpen) {
+        console.log('isOpen', isOpen)
+        try {
+          if (isOpen) {
+            setTimeout(() => {
+              document
+                .getElementsByTagName('body')[0]
+                .classList.add('dropdown-open')
+            }, 10)
+          } else {
+            document
+              .getElementsByTagName('body')[0]
+              .classList.remove('dropdown-open')
+          }
+        } catch (err) {}
+      }
+    }
+  },
   beforeDestroy() {
     clearTimeout(mouseEnterTimer)
     clearTimeout(mouseLeaveTimer)

layouts/blank.vue

@@ -5,6 +5,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 

layouts/default.vue

@@ -72,6 +72,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>