DTL panel - click outside to close the panel

src/App.vue

@@ -7,7 +7,7 @@
   <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
   <DTLButton
     v-if="page?.designToLight?.length > 0"
-    @click="isDTLPanelOpen = !isDTLPanelOpen"
+    @click="openDTLPanel($event)"
   />
 </template>
 
@@ -22,4 +22,10 @@ import { ref } from "vue";
 const { page } = storeToRefs(usePageStore());
 
 const isDTLPanelOpen = ref(false);
+
+// Functions
+function openDTLPanel(event) {
+  isDTLPanelOpen.value = true;
+  event.stopImmediatePropagation();
+}
 </script>

src/components/design-to-light/DTLPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside>
+  <aside @click="preventClose($event)">
     <button @click="emits('close')">X</button>
     <ul class="tabs">
       <li v-for="(proposal, index) in proposals">
@@ -55,15 +55,25 @@ proposals[0].isActive = true;
 const activeProposal = ref(proposals[0]);
 
 window.addEventListener("keyup", closeOnEscape);
+window.addEventListener("click", close);
 
 onBeforeUnmount(() => {
   window.removeEventListener("keyup", closeOnEscape);
+  window.removeEventListener("click", close);
 });
 
 // Functions
 function closeOnEscape(event) {
   if (event.key === "Escape") emits("close");
 }
+
+function close() {
+  emits("close");
+}
+
+function preventClose(event) {
+  event.stopImmediatePropagation();
+}
 </script>
 
 <style scoped>