From 6dc8cf87c19f2616e9cd77a09468ed458c44ba06 Mon Sep 17 00:00:00 2001
From: James Hunt <10615884+thetwopct@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:08:13 +0700
Subject: [PATCH] Hello Bar improvements - work around for fixed navs,
 accessibility, responsiveness, UX

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
---
 .../lf-mu/admin/class-lf-mu-admin.php         | 52 +++++++++++++++++--
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/class-lf-mu-admin.php b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/class-lf-mu-admin.php
index bb8638f1..6e302e3c 100644
--- a/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/class-lf-mu-admin.php
+++ b/web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/admin/class-lf-mu-admin.php
@@ -675,10 +675,51 @@ public function generate_hello_bar_js() {
             letter-spacing: 0.24px;
             line-height: 1.15;
             opacity: 0;
+            z-index: 9999;
+            transition: opacity 0.5s ease;
         ';
         hB.innerHTML = `{$hello_bar_content}`;
+
         document.body.insertBefore(hB, document.body.firstChild);
 
+        var fixedNav = document.querySelector('.td-navbar');
+
+        var isNavFixed = function() {
+            return window.getComputedStyle(fixedNav).position === 'fixed';
+        };
+
+        var updateNavPosition = function() {
+            if (!fixedNav) return;
+
+            if (isNavFixed()) {
+                var hBHeight = hB.offsetHeight;
+                fixedNav.style.top = hBHeight + 'px';
+                window.addEventListener('scroll', function() {
+                    if (isNavFixed()) {
+                        if (window.scrollY >= hBHeight) {
+                            fixedNav.style.top = '0';
+                        } else {
+                            fixedNav.style.top = hBHeight + 'px';
+                        }
+                    }
+                });
+            } else {
+                fixedNav.style.top = '0';
+            }
+        };
+
+        var resizeObserver = new ResizeObserver(function() {
+            updateNavPosition();
+        });
+
+        resizeObserver.observe(hB);
+
+        window.addEventListener('resize', function() {
+            updateNavPosition();
+        });
+
+        updateNavPosition();
+
         var style = document.createElement('style');
         style.innerHTML = `
             .cncf-hello-bar a {
@@ -688,16 +729,19 @@ public function generate_hello_bar_js() {
                 text-underline-position: under;
                 transition: all 0.1s ease;
             }
-            .cncf-hello-bar a:hover {
+            .cncf-hello-bar a:hover, .cncf-hello-bar a:focus {
                 text-decoration: none;
                 text-underline-position: unset;
             }
         `;
         document.head.appendChild(style);
-		hB.style.opacity = '1';
-	});
+
+        setTimeout(function() {
+            hB.style.opacity = '1';
+        }, 5);
+    });
 })();
-		";
+";
 
 		$js_content = $this->minify_js( $js_content );