Close overlay when clicking anywhere

rethinc · May 3, 2024 · aefadbf · aefadbf
1 parent 5205244
commit aefadbf
Showing 1 changed file with 5 additions and 9 deletions.
diff --git 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;