Website: Make all documentation navigation on fleetdm.com sticky (#5680)

* website: sticky documentation nav

* website: move documentation navigation when header is hidden

* revert whitespace changes

* lint fix

* requested changes

* Update layout.ejs

* move scroll listener to documentation page script, adjust styles

* Lint fix

* Update basic-documentation.page.js

website/assets/js/pages/docs/basic-documentation.page.js

@@ -16,6 +16,7 @@ parasails.registerPage('basic-documentation', {
     pagesBySectionSlug: {},
     subtopics: [],
     relatedTopics: [],
+    scrollDistance: 0,
 
   },
 
@@ -75,6 +76,8 @@ parasails.registerPage('basic-documentation', {
 
       return pagesBySectionSlug;
     })();
+    // Adding scroll event listener for scrolling sidebars with the header.
+    window.addEventListener('scroll', this.scrollSideNavigationWithHeader);
   },
 
   mounted: async function() {
@@ -246,6 +249,35 @@ parasails.registerPage('basic-documentation', {
       this.searchString = this.inputTextValue;
     },
 
+    scrollSideNavigationWithHeader: function () {
+      var rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
+      var leftNavBar = document.querySelector('div[purpose="left-sidebar"]');
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      if(rightNavBar) {
+        if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) {
+          rightNavBar.classList.add('header-hidden', 'scrolled');
+        } else {
+          if(scrollTop === 0) {
+            rightNavBar.classList.remove('header-hidden', 'scrolled');
+          } else {
+            rightNavBar.classList.remove('header-hidden');
+          }
+        }
+      }
+      if(leftNavBar) {
+        if (scrollTop > this.scrollDistance && scrollTop > window.innerHeight * 1.5) {
+          leftNavBar.classList.add('header-hidden', 'scrolled');
+        } else {
+          if(scrollTop === 0) {
+            leftNavBar.classList.remove('header-hidden', 'scrolled');
+          } else {
+            leftNavBar.classList.remove('header-hidden');
+          }
+        }
+      }
+      this.scrollDistance = scrollTop;
+    }
+
   }
 
 });

website/assets/styles/pages/docs/basic-documentation.less

@@ -370,6 +370,9 @@
 
     [purpose='content'] {
 
+      .markdown-heading {
+        scroll-margin-top: 55px;
+      }
       hr {
         margin: 0px;
         padding: 0px;
@@ -539,32 +542,60 @@
 
       }
 
+      .header-hidden { // For scrolling the sidebars with the sticky header
+        transform: translateY(-60px);
+        max-height: calc(~'100vh - 80px');
+      }
+      .scrolled:not(.header-hidden) { // For when the page has been scrolled and the header is visible
+        max-height: calc(~'100vh - 170px');
+      }
+      [purpose='left-sidebar'] {
+        position: sticky;
+        top: 118px;
+        height: fit-content;
+        overflow-y: auto;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 500ms;
+        &:not(.scrolled) {
+          max-height: calc(~'100vh - 205px'); // Using a calculated max-height to allow the sidebars to be fully scrollable before the content is scrolled.
+        }
+      }
+
       [purpose='right-sidebar'] {
+        p {
+          line-height: 21px;
+        }
         min-width: 190px;
         max-width: 210px;
         position: sticky;
-        top: 94px;
+        top: 118px;
         height: fit-content;
+        overflow-y: auto;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 500ms;
+
         [purpose='subtopics'] {
-          max-height: calc(~'80vh - 90px'); //To prevent the sidenav being anchored to the bottom of the page if it has overflow.
+          max-height: 100vh;
           overflow-y: auto;
           color: @core-fleet-black;
           padding-top: 4px;
           padding-bottom: 4px;
           border-left: 1px solid @core-vibrant-blue-25;
-
           a {
             color: @core-fleet-black;
             text-decoration: none;
-
             &:hover {
               color: @core-vibrant-blue;
             }
-
           }
-
         }
-
+        &:not(.scrolled) {
+          [purpose='subtopics'] {
+            max-height: calc(~'100vh - 225px'); // Using a calculated max-height to allow the sidebars to be fully scrollable before the content is scrolled.
+          }
+        }
       }
 
       [purpose='content'] {

website/assets/styles/pages/handbook/basic-handbook.less

@@ -122,6 +122,9 @@
   }
 
   [purpose='content'] {
+    .markdown-heading {
+      scroll-margin-top: 55px;
+    }
     h1 {
       padding-bottom: 16px;
       margin-top: 24px;

website/views/layouts/layout.ejs

@@ -327,7 +327,7 @@
                 return;
             }
             if (scrollTop > lastScrollTop && scrollTop > window.innerHeight * 1.5) {
-                header.classList.add('translate-y-0')
+                header.classList.add('translate-y-0');
              } else {
                 if(header.classList.contains('homepage-header') && scrollTop > header.clientHeight) {
                     header.classList.add('sticky')
@@ -335,7 +335,7 @@
                     fleetLogo.style = 'height: 92px; width: 162px;'
                     hamburgerMenuIcon.src="/images/icon-hamburger-blue-16x14@2x.png"
                 }
-                header.classList.remove('translate-y-0')
+                header.classList.remove('translate-y-0');
             }
             lastScrollTop = scrollTop
         }