From aefadbfa290703bad47292ab9acf1a07354172d7 Mon Sep 17 00:00:00 2001
From: Chris Weber <chris.weber@rethinc.ch>
Date: Fri, 3 May 2024 21:50:44 +0200
Subject: [PATCH] Close overlay when clicking anywhere

---
 package/src/examples-app/ExamplesNavigation.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/package/src/examples-app/ExamplesNavigation.vue b/package/src/examples-app/ExamplesNavigation.vue
index 4f19155..25579ab 100644
--- a/package/src/examples-app/ExamplesNavigation.vue
+++ b/package/src/examples-app/ExamplesNavigation.vue
@@ -17,8 +17,8 @@ const onClickClose = () => {
 
 <template>
   <div class="examples-navigation">
-    <button class="button-examples" @click="onClickExamples">Examples</button>
-    <div v-if="showOverlay" class="examples-list-overlay">
+    <button class="button" @click="onClickExamples">Examples</button>
+    <div v-if="showOverlay" class="examples-list-overlay" @click="onClickClose">
       <div class="header">
         <button class="button" @click="onClickClose">Close</button>
       </div>
@@ -44,19 +44,15 @@ const onClickClose = () => {
     padding: 4px 12px;
     color: $color-font-primary;
     background-color: $color-background-secondary;
+    position: fixed;
+    right: 4px;
+    bottom: 4px;
 
     &:hover {
       background-color: $color-highlight;
     }
   }
 
-  .button-examples {
-    @extend .button;
-    position: fixed;
-    right: 4px;
-    bottom: 4px;
-  }
-
   .examples-list-overlay {
     display: flex;
     flex-direction: column;