click outside model

assets/js/utils/clickoutside.js

@@ -0,0 +1,18 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const modal = document.querySelector('[x-show="showModal"]');
+
+  if (modal) {
+    const modalContent = modal.querySelector(".transform");
+
+    document.addEventListener("click", function (event) {
+      if (modal.__x && modal.__x.$data.showModal) {
+        console.log("click");
+        // Check if modal is currently open
+        if (!modalContent.contains(event.target)) {
+          // If the clicked element is not within the modal content
+          modal.__x.$data.showModal = false; // Use Alpine.js internal API to update the state
+        }
+      }
+    });
+  }
+});

hugo.toml

@@ -1,4 +1,4 @@
-baseURL = "https://amplifycolorado.colabnews.co/"
+baseURL = "http://localhost:1313/"
 languageCode = "en-us"
 title = ""
 enableRobotsTXT = true

layouts/_default/home.html

@@ -103,9 +103,11 @@ <h1>
       x-transition:leave-end="opacity-0"
       x-cloak
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      @click="showModal = false"
     >
       <div
         class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
+        @click.stop
       >
         <div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
           <button

layouts/partials/nav.html

@@ -149,9 +149,11 @@
       x-transition:leave-end="opacity-0"
       x-cloak
       class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+      @click="showModal = false"
     >
       <div
         class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
+        @click.stop 
       >
         <div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
           <button