Website: Update sidebar on article template page and scrolling sidebar functions (#23594)

Changes:
- Updated the styles and layout of the article template page sidebar to
match the latest wireframes
- Updated the scrolling function for sticky sidebars on articles and
docs pages
- Updated the sidebar CTA on article pages to check `typeof me` instead
of `me`.

website/assets/js/pages/articles/basic-article.page.js

@@ -6,6 +6,8 @@ parasails.registerPage('basic-article', {
     articleHasSubtitle: false,
     articleSubtitle: undefined,
     subtopics: [],
+    lastScrollTop: 0,
+    scrollDistance: 0,
   },
 
   //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
@@ -81,8 +83,10 @@ parasails.registerPage('basic-article', {
       if (rightNavBar) {
         if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) {
           rightNavBar.classList.add('header-hidden');
-        } else {
+          this.lastScrollTop = scrollTop;
+        } else if(scrollTop < this.lastScrollTop - 60) {
           rightNavBar.classList.remove('header-hidden');
+          this.lastScrollTop = scrollTop;
         }
       }
       this.scrollDistance = scrollTop;

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

@@ -18,7 +18,7 @@ parasails.registerPage('basic-documentation', {
     relatedTopics: [],
     scrollDistance: 0,
     navSectionsByDocsSectionSlug: {},
-
+    lastScrollTop: 0,
   },
 
   computed: {
@@ -314,11 +314,11 @@ parasails.registerPage('basic-documentation', {
       // If the right nav bar exists, add and remove a class based on the current scroll position.
       if (rightNavBar) {
         if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) {
-          rightNavBar.classList.add('header-hidden', 'scrolled');
-        } else if (scrollTop === 0) {
-          rightNavBar.classList.remove('header-hidden', 'scrolled');
-        } else {
+          rightNavBar.classList.add('header-hidden');
+          this.lastScrollTop = scrollTop;
+        } else if(scrollTop < this.lastScrollTop - 60) {
           rightNavBar.classList.remove('header-hidden');
+          this.lastScrollTop = scrollTop;
         }
       }
       // If back to top button exists, add and remove a class based on the current scroll position.

website/assets/styles/pages/articles/basic-article.less

@@ -131,25 +131,45 @@
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 500ms;
-    [purpose='sidebar-link'] {
-      margin-bottom: 8px;
-      display: block;
-      color: #515774;
-      &:hover {
-        text-decoration: none;
-        color: @core-fleet-black;
+  }
+  [purpose='sidebar-link'] {
+    margin-bottom: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #515774;
+    img {
+      height: 16px;
+      width: 16px;
+      display: inline;
+      margin-right: 12px;
+    }
+    &:hover {
+      text-decoration: none;
+      color: @core-fleet-black;
+      img {
+        filter: brightness(0.5);
       }
     }
   }
-  [purpose='docs-links'] {
+  [purpose='edit-link'] {
+    padding-top: 24px;
+    padding-bottom: 16px;
+    margin-top: 24px;
+    border-top: 1px solid #E2E4EA;
     a {
-      display: block;
+      margin-bottom: 0px;
     }
   }
+  // [purpose='docs-links'] {
+  //   a {
+  //     display: block;
+  //   }
+  // }
   [purpose='social-share-buttons'] {
-    padding-bottom: 24px;
+    padding-top: 16px;
+    padding-bottom: 16px;
     margin-bottom: 24px;
-    border-bottom: 1px solid #E2E4EA;
     a {
       margin-right: 16px;
     }
@@ -159,9 +179,13 @@
     }
   }
   [purpose='subtopics'] {
-    padding-bottom: 24px;
     margin-bottom: 24px;
-    border-bottom: 1px solid #E2E4EA;
+    a {
+      margin-bottom: 8px;
+      &:last-of-type {
+        margin-bottom: 0px;
+      }
+    }
   }
   .header-hidden { // For scrolling the sidebar with the sticky header
     transform: translateY(-120px);

website/views/pages/articles/basic-article.ejs

@@ -46,7 +46,6 @@
       <div purpose="sidebar-container">
         <div purpose="right-sidebar" class="d-flex flex-column">
           <div purpose="social-share-buttons" class="d-flex flex-column order-lg-2 order-1">
-            <p><strong>Share</strong></p>
             <div class="d-flex flex-row">
               <a :href="`https://news.ycombinator.com/submitlink?u=https://fleetdm.com${encodeURIComponent(thisPage.url)}&t=${encodeURIComponent(thisPage.meta.articleTitle)}`"><img src="/images/social-share-icon-hacker-news-20x20@2x.png" alt="Share this article on Hacker News"></a>
               <a :href="`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://fleetdm.com'+thisPage.url)}`"><img src="/images/social-share-icon-linkedin-20x20@2x.png" alt="Share this article on LinkedIn"></a>
@@ -59,14 +58,18 @@
             <a purpose="sidebar-link" v-for="topic in subtopics" :href="topic.url" class="nav-link p-0">{{topic.title}}</a>
           </div>
           <div purpose="docs-links" class="order-3">
-            <a purpose="sidebar-link" href="/docs">Docs</a>
-            <a purpose="sidebar-link" href="/docs/rest-api">REST API</a>
-            <a purpose="sidebar-link" href="/guides">Guides</a>
+            <a purpose="sidebar-link" href="/docs"><img alt="Docs" src="/images/icon-docs-16x16@2x.png"> Docs</a>
+            <a purpose="sidebar-link" href="/docs/rest-api"><img alt="REST API" src="/images/icon-api-16x16@2x.png"> REST API</a>
+            <a purpose="sidebar-link" href="/guides"><img alt="Guides" src="/images/icon-guides-16x16@2x.png"> Guides</a>
+            <a purpose="sidebar-link" href="/contact"><img alt="Talk to us" src="/images/icon-contact-16x16@2x.png"> Talk to us</a>
+            <div purpose="edit-link">
+              <a purpose="sidebar-link" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Suggest an edit</a>
+            </div>
             <div purpose="sidebar-cta">
-              <a href="<% if(!me) {%>/register<% } else { %>/start<% } %>">
+              <a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
               <div purpose="cta-image"></div>
               <div purpose="cta-text">
-                <% if(!me){ %>
+                <% if(typeof me === 'undefined'){ %>
                   <h4>Try it out</h4>
                   <p>See what Fleet can do</p>
                   <a purpose="cta-button" class="btn btn-primary docs-cta-continue-button" href="/register">Start now</a>
@@ -91,22 +94,11 @@
               </div>
               </a>
             </div>
-            <div>
-              <a href="/contact" purpose="sidebar-contact-cta" class="d-flex flex-row justify-content-start">
-              <div class="d-flex align-self-start">
-                <img alt="Ask us anything" src="/images/icon-question-20x19@2x.png">
-              </div>
-              <div>
-                <p class="mb-0">Questions?</p>
-                <animated-arrow-button text-color="#515774" class="py-0" style="font-weight: 400" href="/contact">Ask us anything</animated-arrow-button>
-              </div>
-              </a>
-            </div>
-            <a purpose="edit-button" class="d-inline-block text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"><img alt="A pencil icon" src="/images/pencil-16x16@2x.png">Edit page</a>
-          </div>
           <!-- <div class="d-flex flex-row align-items-center justify-content-start pt-3 pt-sm-1">
             <a purpose="rss-button" @click="clickCopyRssLink(articleCategorySlug)"><span>Subscribe</span></a>
           </div> -->
+          </div>
+
         </div>
       </div>
       <div purpose="article-container">