fix: drawer close when clicked outside (#81)

Author: sstefdev

packages/invoice-dashboard/src/lib/dashboard/drawer.svelte

@@ -3,9 +3,15 @@
 
   export let active = false;
   export let onClose: () => void;
+
+  let drawerElement: HTMLElement;
 </script>
 
-<div class={`drawer ${active ? "active" : "hidden"} `}>
+<div
+  class={`drawer-overlay ${active ? "active" : "hidden"}`}
+  on:click|stopPropagation={onClose}
+></div>
+<div bind:this={drawerElement} class={`drawer ${active ? "active" : "hidden"}`}>
   <div class="innerDrawer">
     <button class="close" on:click={onClose} aria-label="Close drawer">
       <Close />
@@ -16,6 +22,16 @@
 </div>
 
 <style>
+  .drawer-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 200;
+  }
+
   .sr-only {
     position: absolute;
     width: 1px;
@@ -28,6 +44,7 @@
     border-width: 0;
   }
   .drawer {
+    z-index: 1000;
     display: flex;
     position: absolute;
     top: 10px;