add waitlist banner to navbar

assets/css/custom.css

@@ -113,6 +113,38 @@ kbd,
     max-width: var(--cedar-max);
 }
 
+.banner {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    padding: 0.5rem 2.5rem;
+}
+
+.banner.hide {
+    display: none;
+}
+
+.banner__link {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+}
+
+.banner__close {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translateY(-50%);
+    background: none;
+    border: 0;
+    padding: 0;
+    line-height: 1;
+    font-size: 1.25rem;
+    color: inherit;
+    cursor: pointer;
+}
+
 .nav-text-link {
     border-radius: 0;
 }

layouts/partials/custom/head-end.html

@@ -31,7 +31,7 @@
         });
 
         // Add a click event on various child elements to close the parent modal
-        (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-body .delete, .modal-card-foot .button') || []).forEach(($close) => {
+        (document.querySelectorAll('.modal-background, .modal-close, .modal-close-button, .modal-card-head .delete, .modal-card-body .delete, .modal-card-foot .button') || []).forEach(($close) => {
             const $target = $close.closest('.modal');
 
             $close.addEventListener('click', () => {

layouts/partials/navbar.html

@@ -15,6 +15,8 @@
     class="hextra-nav-container-blur hx:pointer-events-none hx:absolute hx:z-[-1] hx:h-full hx:w-full hx:bg-white hx:dark:bg-dark hx:shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] hx:contrast-more:shadow-[0_0_0_1px_#000] hx:dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] hx:contrast-more:dark:shadow-[0_0_0_1px_#fff]"
   ></div>
 
+  {{ partial "waitlist-banner.html" . }}
+
   <nav class="hextra-max-navbar-width hx:mx-auto hx:flex hx:items-center hx:justify-end hx:gap-2 hx:h-16 hx:px-6">
     {{ partial "navbar-title.html" . }}
 

layouts/partials/waitlist-banner.html

@@ -0,0 +1,38 @@
+<div class="banner" id="banner">
+  <a href="https://demo.cedardb.cloud" class="banner__link">CedarDB Cloud</a> coming soon! 
+  <a class="js-modal-trigger button hx:whitespace-nowrap hx:px-2" data-target="modal-waitlist" href="#">Join our waitlist →</a>
+  <button type="button" class="banner__close" id="banner-close" aria-label="Dismiss">&times;</button>
+</div>
+<script>
+  (function () {
+    var banner = document.getElementById("banner");
+    if (!banner) return;
+
+    if (sessionStorage.getItem("waitlist-banner-closed") === "true") {
+      banner.classList.add("hide");
+      return;
+    }
+
+    document.getElementById("banner-close").addEventListener("click", function () {
+      banner.classList.add("hide");
+      sessionStorage.setItem("waitlist-banner-closed", "true");
+    });
+  })();
+</script>
+<div id="modal-waitlist" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card hx:p-1">
+        <div class="modal-card-body hx:p-6 hx:has-background-color-secondary hx:is-rounded-small">
+            <div class="hx:title hx:has-text-left hx:mb-6" style="font-size: 2rem; color: white; margin-bottom: 10px;">Join our Waitlist</div>
+            <script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
+            <script>
+              hbspt.forms.create({
+                region: "eu1",
+                portalId: "144471709",
+                formId: "a9d14ba0-afcf-40c4-8a1c-4543a9d7c9fa",
+              });
+            </script>
+            <button class="hx:delete hx:is-right modal-close-button" aria-label="close"></button>
+        </div>
+    </div>
+</div>