From 694528fef37c61bcdc0fedcaf40c20b4162437fa Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 15 Dec 2023 10:00:41 -0600
Subject: [PATCH] Website: update sticky header (#15690)

Changes:
- Reverted the style change from
https://github.com/fleetdm/fleet/pull/15677
- Updated the sticky header function to not hide the header if the
mobile navigation menu has the `.open` class
- Added comments to the sticky header function to explain what it is
doing.
---
 website/assets/styles/layout.less |  2 +-
 website/views/layouts/layout.ejs  | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index 2ac14169e0..de88b18dcf 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -450,6 +450,6 @@ body.detected-mobile {
 
 // Some utilities for the sticky nav behaviour.
 // Note: this will not be applied if a navigation menu open.
-.translate-y-0:not(:has(.show)) {
+.translate-y-0 {
   transform: translateY(-235px);
 }
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index 2d03fa4d45..cf34ab5749 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -359,14 +359,24 @@
     <% /* Sticky header */ %>
     <script>
         var lastScrollTop = 0;
-        var header = document.querySelector('.header')
+        var header = document.querySelector('[purpose="header-container"]');
+        let mobileNavMenu = document.querySelector('[purpose="mobile-nav"]');
         window.addEventListener('scroll', windowScrolled);
         function windowScrolled() {
+          if(!header || !mobileNavMenu){
+            return;
+          }
+          let isMobileNavOpen = [...mobileNavMenu.classList].includes('show');
+          if(isMobileNavOpen) {
+            return;
+          }
           let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
           if(scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
+            // If the user scrolls 1.5x the height of their browser window, hide the page header.
             header.classList.add('translate-y-0');
             lastScrollTop = scrollTop;
           } else if(scrollTop < lastScrollTop - 60) {
+            // If the user scrolls 60 pixels upwards on the screen, we'll show the page header
             header.classList.remove('translate-y-0');
             lastScrollTop = scrollTop;
           }