WIP highlight selected top nav section

Author: osfameron

src/css/header.css

@@ -42,6 +42,9 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
+}
+
+.navbar-new-top {
   padding: 0.5rem 0;
 }
 
@@ -83,6 +86,7 @@
 
 .navbar-new-bottom .nav-item {
   margin: 0 var(--base-space);
+  padding: 0.5rem;
 }
 
 .navbar-nav .nav-link {
@@ -213,6 +217,10 @@
   left: -0.75em;
 }
 
+.nav-item-selected {
+  background-color: var(--color-brand-red);
+}
+
 @media screen and (min-width: 1024px) {
   .navbar-start > a.navbar-item:hover,
   .navbar-start > .navbar-item:hover > .navbar-link {
@@ -267,7 +275,7 @@
 }
 
 @media screen and (max-width: 992px) {
-  .navbar {
+  .navbar-new-top {
     padding: 0.8rem 0;
   }
 

src/helpers/includes.js

@@ -1,3 +1,5 @@
 'use strict'
 
-module.exports = (haystack, needle) => ~(haystack || '').indexOf(needle)
+module.exports = (haystack, needle) => {
+  return ~(haystack || '').indexOf(needle)
+}

src/helpers/nav-groups.js

@@ -2,7 +2,7 @@
 
 module.exports = ({
   data: {
-    root: { contentCatalog = { resolvePage: () => undefined }, site },
+    root: { contentCatalog = { resolvePage: () => undefined }, site, page },
   },
 }) => {
   let navGroups = site.keys.navGroups
@@ -42,6 +42,8 @@ module.exports = ({
     }
   }
   navGroups._compiled = true
+  console.log(navGroups)
+  console.log(page)
   return (site.keys.navGroups = navGroups)
 }
 

src/partials/header-content.hbs

@@ -33,16 +33,17 @@
 
               <div class="navbar-collapse collapse" id="navbar2">
                 <ul class="navbar-nav w-100 justify-content-start">
-                  <li class="nav-item">
+                  <li class="nav-item {{#if (eq "home" page.component.name)}}nav-item-selected{{/if}}"">
                     <a href="{{#with (and site.url site.homeUrl)}}{{@root.site.url}}{{this}}{{else}}{{siteRootPath}}{{/with}}" class="nav-link">
                       <i class="fas fa-home"></i>
                     </a>
                   </li>
                   {{#each (nav-groups)}}
                   {{#if ./url}}
-                  <li class="nav-item">
+                  <li class="nav-item {{#if (or (eq ./url @root.page.url) (includes ./components @root.page.component.name))}}nav-item-selected{{/if}}">
                     <a class="nav-link" href="{{relativize ./url}}">
                       {{{./title}}}
+                      
                       {{#if (eq ./title 'Tutorials')}}
                       <span class="arrow">
                         <i class="fas fa-arrow-right"></i>