feat(ui): Restyle top navigation bar and banner (#309)

phiro56 · web-flow · commit 3d752d6d345c · 2025-08-06T09:38:34.000-07:00
feat(ui): Restyle top navigation bar and banner - Add banner close functionality with 24-hour persistence <img width="1727" height="1038" alt="Screenshot 2025-07-16 at 6 22 40 PM" src="https://github.com/user-attachments/assets/818cc0f4-0b20-4fb9-9db9-55bab54ffe66" /> --------- Signed-off-by: Daniel Phillips <phiro56@gmail.com>
diff --git a/sass/_valkey.scss b/sass/_valkey.scss
@@ -1426,16 +1426,37 @@ pre table {
     }
   }
 }
+
+html.banner-hidden .banner {
+  display: none;
+}
   
 .banner {
+  position: relative;
+  background-color:  #2D2471;
+  color: white;
+
   .width-limiter {
     padding-bottom: 10px;
   }
 
-  background-color:  $grey-lt-300;
-  color: $text;
-  
-  border-top: 1px solid $grey-dk-100;
+  a {
+    color: white;
+    text-decoration: underline;
+
+    &:hover {
+      opacity: 0.75;
+    }
+  }
+
+  .close-banner {
+    position: absolute;
+    top: 50%;
+    right: 2rem;
+    margin-top: -12px;
+    width: 24px;
+    height: 24px;
+  }
 }
 
 .client-list {
diff --git a/static/assets/js/nav.js b/static/assets/js/nav.js
@@ -6,6 +6,21 @@ window.toggleHeaderMenu = function() {
     }
 };
 
+// Banner close functionality
+function initBannerClose() {
+    const banner = document.querySelector('.banner');
+    const closeButton = document.querySelector('.close-banner');
+    
+    if (!banner || !closeButton) return;
+    
+    // Add click event to close button
+    closeButton.addEventListener('click', function(e) {
+        e.preventDefault(); // Prevent navigation to home page
+        document.documentElement.classList.add('banner-hidden');
+        localStorage.setItem('bannerClosedTime', Date.now().toString());
+    });
+}
+
 // Set active menu item based on current URL
 function setActiveMenuItem() {
     const nav = document.querySelector('.header nav');
@@ -30,7 +45,10 @@ function setActiveMenuItem() {
 }
 
 // Run when DOM is loaded
-document.addEventListener('DOMContentLoaded', setActiveMenuItem);
+document.addEventListener('DOMContentLoaded', function() {
+    setActiveMenuItem();
+    initBannerClose();
+});
 
 // Class detection function that checks if an element with a given class name exists
 // This provides backwards compatibility for older browsers (IE6-8) that don't support getElementsByClassName
diff --git a/static/img/icon-outline-close.svg b/static/img/icon-outline-close.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16.2 16.2">
+  <!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M14.8,0s0,0,0,0l1.4,1.4s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0l-6.7,6.7,6.7,6.7s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0l-1.4,1.4s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0l-6.7-6.7-6.7,6.7s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0L0,14.9s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0l6.7-6.7L0,1.4s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0L1.4,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0l6.7,6.7L14.8,0s0,0,0,0c0,0,0,0,0,0h0Z"/>
+</svg>
diff --git a/templates/default.html b/templates/default.html
@@ -1,6 +1,23 @@
 {%- block head -%}{%- endblock -%}<!DOCTYPE html>
 <html lang="{{ page.lang | default(value=config.default_language) }}">
 {% include "includes/head.html" %}
+<script>
+// Banner state management: Check localStorage before DOM renders to prevent layout shift
+// and ensure banner visibility state is consistent with user's previous interactions.
+(function() {
+  const bannerClosedTime = localStorage.getItem('bannerClosedTime');
+  if (bannerClosedTime) {
+    const closedTime = parseInt(bannerClosedTime, 10);
+    const twentyFourHours = 24 * 60 * 60 * 1000; // 24 hours in ms
+    if (Date.now() - closedTime < twentyFourHours) {
+      document.documentElement.classList.add('banner-hidden');
+    } else {
+      // Clear expired timestamp
+      localStorage.removeItem('bannerClosedTime');
+    }
+  }
+})();
+</script>
 <body 
   {%- if page.extra.sectionid -%} id="{{ page.extra.sectionid }}"{%- endif -%}
   {% if page.extra.body_class %} class="{{ page.extra.body_class }}"{% endif %}
@@ -11,6 +28,9 @@
     <div class="width-limiter">
       {{ config.extra.banner | markdown | safe}}
     </div>
+    <a href="/" class="close-banner">
+      <img src="/img/icon-outline-close.svg" alt="Icon Close" width="16" height="16"/>
+    </a>
   </div>
   {%- endif -%}
   <div class="header">
