From 0c336279b401ad81d0a4733ea8e5c702188007ed Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 8 Jan 2019 14:37:07 +0100
Subject: [PATCH] Improved dropdown behaviour

---
 components/Dropdown.vue | 21 +++++++++++++++++++++
 layouts/default.vue     | 21 +++++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/components/Dropdown.vue b/components/Dropdown.vue
index f47c1cabb..1440170f3 100644
--- a/components/Dropdown.vue
+++ b/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)
diff --git a/layouts/default.vue b/layouts/default.vue
index 56285c753..6004cec26 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -81,6 +81,7 @@
         <nuxt />
       </div>
     </ds-container>
+    <div id="overlay" />
   </div>
 </template>
 
@@ -162,4 +163,24 @@ export default {
     padding-bottom: 1rem;
   }
 }
+
+#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;
+  }
+}
 </style>