Feat: Add persistence to the ad banner with local storage

src/website/top-banner.js

@@ -1,12 +1,101 @@
+const MESSAGE_BAR_STATE = {
+  CLOSED: "CLOSED",
+  OPEN: "OPEN",
+};
+
+const MESSAGE_BAR_STATUS = {
+  ACTIVE: "ACTIVE",
+  INACTIVE: "INACTIVE",
+};
+
+const messageBar = {
+  status: MESSAGE_BAR_STATUS.ACTIVE,
+  id: {
+    key: "messageBar_id",
+    value: "BEST_OF_DEVDAY_2024",
+  },
+  state: {
+    key: "messageBar_state",
+  },
+};
+
+const closeMessageBar = () => {
+  const isMessageBarActive = messageBar.status === MESSAGE_BAR_STATUS.ACTIVE;
+
+  if (!isMessageBarActive) {
+    return;
+  }
+
+  window.localStorage.setItem(messageBar.state.key, MESSAGE_BAR_STATE.CLOSED);
+
+  document.querySelector(".top-banner-bg").classList.add("closed");
+  document.querySelector(".top-banner").classList.add("closed");
+  document.querySelector(".top-banner-spacer").classList.add("hide");
+  document.querySelector(".navbar").classList.remove("top-banner-open");
+};
+
+const renderTopBanner = () => {
+  document.querySelector(".top-banner-bg").classList.remove("closed");
+  document.querySelector(".top-banner").classList.remove("closed");
+  document.querySelector(".top-banner-spacer").classList.remove("hide");
+  document.querySelector(".navbar").classList.add("top-banner-open");
+};
+
+const loadBannerStateFromLocalStorage = () => {
+  let messageBarId = window.localStorage.getItem(messageBar.id.key);
+  let messageBarState = window.localStorage.getItem(messageBar.state.key);
+
+  if (!messageBarId) {
+    window.localStorage.setItem(messageBar.id.key, messageBar.id.value);
+    messageBarId = window.localStorage.getItem(messageBar.id.key);
+  }
+
+  if (!messageBarState) {
+    window.localStorage.setItem(messageBar.state.key, MESSAGE_BAR_STATE.OPEN);
+    messageBarState = window.localStorage.getItem(messageBar.state.key);
+  }
+
+  switch (messageBar.status) {
+    case MESSAGE_BAR_STATUS.ACTIVE: {
+      const isExistingCta = messageBarId === messageBar.id.value;
+
+      if (!isExistingCta) {
+        window.localStorage.setItem(messageBar.id.key, messageBar.id.value);
+        window.localStorage.setItem(
+          messageBar.state.key,
+          MESSAGE_BAR_STATE.OPEN
+        );
+
+        renderTopBanner();
+
+        return;
+      }
+
+      switch (messageBarState) {
+        case MESSAGE_BAR_STATE.OPEN: {
+          renderTopBanner();
+
+          return;
+        }
+        default: {
+          return;
+        }
+      }
+    }
+    default: {
+      return;
+    }
+  }
+};
+
 export function TopBanner() {
   document.addEventListener("DOMContentLoaded", function () {
+    loadBannerStateFromLocalStorage();
+
     document
       .querySelector(".close-top-banner")
       .addEventListener("click", () => {
-        document.querySelector(".top-banner-bg").classList.add("closed");
-        document.querySelector(".top-banner").classList.add("closed");
-        document.querySelector(".top-banner-spacer").classList.add("hide");
-        document.querySelector(".navbar").classList.remove("top-banner-open");
+        closeMessageBar();
       });
   });
 }

stylus/website/index.styl

@@ -126,7 +126,7 @@ body {
 
   &.top-banner-open {
     margin-top: 5px;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
 
     +breakpoint('tablet') {
       margin-top: 48px;
@@ -1848,13 +1848,14 @@ footer {
   width: 100%;
   height: 48px;
   z-index: 100;
+  transition: all 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.1s linear;
+    transition: all 0.4s linear;
   }
 }
 
@@ -1875,13 +1876,14 @@ footer {
   left: 0;
   right: 0;
   overflow: hidden;
+  transition: all 0.4s linear;
 
   &.closed {
     visibility: hidden;
     height: 0;
     opacity: 0;
     padding: 0;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
   }
 
   .top-banner-container {
@@ -1947,6 +1949,6 @@ footer {
 
   &.hide {
     height: 0;
-    transition: all 0.2s linear;
+    transition: all 0.4s linear;
   }
 }

views/website/navigation.pug

@@ -1,13 +1,13 @@
-.top-banner-bg
-.top-banner
+.top-banner-bg.closed
+.top-banner.closed
   .top-banner-container
-    a(href="https://a0.to/jwt-io-feedback" target="_blank") Learn about the upcoming changes to jwt.io and share your feedback
+    a(href="https://pages.okta.com/2024-11-WBN-Best-of-Dev-Day_LP/" target="_blank") Missed DevDay24? Register for the Best of DevDay
       span(aria-hiden="true") →
     button.close-top-banner +
 
-.top-banner-spacer
+.top-banner-spacer.hide
 
-nav.navbar.closed.top-banner-open
+nav.navbar
     .container
       .top-mobile
         .menu-trigger