From 7f3d3ad96c44379dcf88419cc1f43a133bde06c4 Mon Sep 17 00:00:00 2001
From: eashaw <eashaw@sailsjs.com>
Date: Mon, 11 Oct 2021 00:42:07 -0500
Subject: [PATCH] current page local, conditional class, active styles (#2438)

---
 website/assets/styles/layout.less |  8 ++++++++
 website/config/routes.js          | 21 +++++++++++++++------
 website/views/layouts/layout.ejs  |  8 ++++----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
index 333ed28017..23a0449cc0 100644
--- a/website/assets/styles/layout.less
+++ b/website/assets/styles/layout.less
@@ -123,6 +123,14 @@ html, body {
     color: #192147;
     font-weight: @bold;
   }
+  .current-page {
+    color: #6a67fe;
+    svg {
+      path {
+        fill: #6a67fe;
+      }
+    }
+  }
   .header-link:hover {
     color: #6a67fe;
 
diff --git a/website/config/routes.js b/website/config/routes.js
index 540e0a35ee..2f54a30272 100644
--- a/website/config/routes.js
+++ b/website/config/routes.js
@@ -20,7 +20,7 @@ module.exports.routes = {
 
   'GET /company/contact': {
     action: 'view-contact',
-    locals:{
+    locals: {
       pageTitleForMeta: 'Contact us | Fleet for osquery',
       pageDescriptionForMeta: 'Get in touch with our team.'
     }
@@ -28,7 +28,8 @@ module.exports.routes = {
 
   'GET /get-started': {
     action: 'view-get-started' ,
-    locals:{
+    locals: {
+      currentPage: 'get started',
       pageTitleForMeta: 'Get started | Fleet for osquery',
       pageDescriptionForMeta: 'Learn about getting started with Fleet.'
     }
@@ -36,7 +37,8 @@ module.exports.routes = {
 
   'GET /pricing': {
     action: 'view-pricing',
-    locals:{
+    locals: {
+      currentPage: 'pricing',
       pageTitleForMeta: 'Pricing | Fleet for osquery',
       pageDescriptionForMeta: 'View Fleet plans and pricing details.'
     }
@@ -44,7 +46,7 @@ module.exports.routes = {
 
   'GET /logos': {
     action: 'view-press-kit',
-    locals:{
+    locals: {
       pageTitleForMeta: 'Logos | Fleet for osquery',
       pageDescriptionForMeta: 'Download Fleet logos, wallpapers, and screenshots.'
     }
@@ -52,7 +54,8 @@ module.exports.routes = {
 
   'GET /queries': {
     action: 'view-query-library',
-    locals:{
+    locals: {
+      currentPage: 'queries',
       pageTitleForMeta: 'Queries | Fleet for osquery',
       pageDescriptionForMeta: 'A growing collection of useful queries for organizations deploying Fleet and osquery.'
     }
@@ -60,11 +63,17 @@ module.exports.routes = {
 
   'GET /queries/:slug': {
     action: 'view-query-detail',
+    locals: {
+      currentPage: 'queries',
+    }
   },
 
   'GET /docs/?*': {
     skipAssets: false,
     action: 'docs/view-basic-documentation',
+    locals: {
+      currentPage: 'docs',
+    }
   },// handles /docs and /docs/foo/bar
 
   'GET /handbook/?*':  {
@@ -74,7 +83,7 @@ module.exports.routes = {
 
   'GET /transparency': {
     action: 'view-transparency',
-    locals:{
+    locals: {
       pageTitleForMeta: 'Transparency | Fleet for osquery',
       pageDescriptionForMeta: 'Learn what data osquery can see.',
     }
diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
index ea3104fe2d..6090523752 100644
--- a/website/views/layouts/layout.ejs
+++ b/website/views/layouts/layout.ejs
@@ -101,10 +101,10 @@
             </div>
           </div>
           <div class="d-none d-lg-flex">
-            <a href="/get-started" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style="text-decoration: none; line-height: 23px;">Get started</a>
-            <a href="/docs" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Docs</a>
-            <a href="/queries" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Queries</a>
-            <a href="/pricing" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Pricing</a>
+            <a href="/get-started" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'get started' ? 'current-page' : '' %>" style="text-decoration: none; line-height: 23px;">Get started</a>
+            <a href="/docs" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'docs' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Docs</a>
+            <a href="/queries" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'queries' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Queries</a>
+            <a href="/pricing" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'pricing' ?  'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Pricing</a>
             <a target="_blank" href="/blog" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Blog</a>
             <!-- <a href="/company/contact" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Contact</a> -->
             <a target="_blank" href="https://github.com/fleetdm/fleet" class="header-link d-flex align-items-center px-3 py-2" style=" text-decoration: none;line-height: 23px;">