Merge pull request #178 from couchbase/hakim-top-nav-highlight

AV-75840 top nav highlight

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;
 }
 
@@ -82,7 +85,8 @@
 }
 
 .navbar-new-bottom .nav-item {
-  margin: 0 var(--base-space);
+  margin: 0 var(--base-extra-small-space);
+  padding: var(--base-extra-small-space) var(--base-space);
 }
 
 .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;
   }
 
@@ -291,12 +299,6 @@
     width: 100%;
   }
 
-  .navbar-new-bottom .nav-item {
-    padding: 0 15px;
-    width: 100%;
-    margin: 10px 0;
-  }
-
   .search {
     margin: 10px 0;
     width: 100%;

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-group-selected.js

@@ -0,0 +1,23 @@
+'use strict'
+
+module.exports = module.exports = (navGroup, {
+  data: {
+    root: { page, site },
+  },
+}) => {
+  if (navGroup === 'home') {
+    // FAKE value to signal that we instead check all the navgroups
+    const navGroups = site.keys.navGroups
+    // NB this relies on variable stored in site.keys, so must be called
+    // *after* nav-groups has already prepared the data
+    const possible = navGroups.filter((it) => selected(it, page))
+    return possible.length === 1 && possible[0].title === 'Home'
+  } else {
+    return selected(navGroup, page)
+  }
+}
+
+function selected (navGroup, page) {
+  return (navGroup.url === page?.url) ||
+    (navGroup.components?.includes(page.component?.name))
+}

src/helpers/nav-groups.js

@@ -6,25 +6,30 @@ module.exports = ({
   },
 }) => {
   let navGroups = site.keys.navGroups
+
   if (!navGroups) return []
   if (navGroups._compiled) return navGroups
+
   const components = site.components
   const componentNames = Object.keys(components)
   const claimed = []
-  navGroups = JSON.parse(navGroups).reduce((accum, navGroup) => {
-    const componentNamesInGroup = (navGroup.components || []).reduce((matched, componentName) => {
-      if (~componentName.indexOf('*')) {
-        const rx = new RegExp(`^${componentName.replace(/[*]/g, '.*?')}$`)
-        return matched.concat(componentNames.filter((candidate) => rx.test(candidate)))
-      } else if (componentName in components) {
-        return matched.concat(componentName)
-      }
-      return matched
-    }, [])
+
+  navGroups = JSON.parse(navGroups).map((navGroup) => {
+    const componentNamesInGroup =
+      (navGroup.components || []).flatMap(
+        (componentName) => componentNames.filter(globbify(componentName)))
+
     claimed.push(...componentNamesInGroup)
-    return accum.concat(compileNavGroup(navGroup, componentNamesInGroup, contentCatalog, components))
-  }, [])
-  const orphaned = componentNames.filter((it) => claimed.indexOf(it) < 0)
+
+    return compileNavGroup(
+      navGroup,
+      componentNamesInGroup,
+      contentCatalog,
+      components)
+  })
+
+  const orphaned = componentNames.filter((it) => !claimed.includes(it))
+
   if (orphaned.length) {
     const homeIdx = orphaned.indexOf('home')
     if (~homeIdx) {
@@ -41,18 +46,22 @@ module.exports = ({
         : navGroups.push(compileNavGroup({ title: 'General' }, orphaned, contentCatalog, components))
     }
   }
+
   navGroups._compiled = true
-  return (site.keys.navGroups = navGroups)
+
+  site.keys.navGroups = navGroups
+  return navGroups
 }
 
 function compileNavGroup (navGroup, componentNamesInGroup, contentCatalog, components) {
-  navGroup.components = componentNamesInGroup
   let startPage = navGroup.startPage
   if (startPage) {
     startPage = contentCatalog.resolvePage(startPage)
     if (startPage) navGroup.url = startPage.pub.url
     delete navGroup.startPage
   }
+
+  navGroup.components = componentNamesInGroup
   if (componentNamesInGroup.length) {
     navGroup.latestVersions = componentNamesInGroup.reduce((latestVersionMap, it) => {
       latestVersionMap[it] = components[it].latest.version
@@ -61,3 +70,8 @@ function compileNavGroup (navGroup, componentNamesInGroup, contentCatalog, compo
   }
   return navGroup
 }
+
+function globbify (componentName) {
+  const rx = new RegExp(`^${componentName.replace(/[*]/g, '.*?')}$`)
+  return (it) => rx.test(it)
+}

src/partials/header-content.hbs

@@ -9,7 +9,8 @@
                   </a>
                 </li>
                 <li>
-                  <a class="navbar-brand cb-documentation" href="{{#with (and site.url site.homeUrl)}}{{{@root.site.url}}}{{{this}}}{{else}}{{{siteRootPath}}}{{/with}}">
+                  <a class="navbar-brand cb-documentation"
+                      href="{{#if (and site.url site.homeUrl)}}{{{site.url}}}{{{site.homeUrl}}}{{else}}{{{siteRootPath}}}{{/if}}">
                     <img src="{{{uiRootPath}}}/img/cb-documentation.svg" alt="Couchbase Documentation" class="cb-docs" />
                     <img src="{{{uiRootPath}}}/img/cb-docs-hover.svg" alt="Couchbase Documentation" class="hide cb-hover-docs" />
                   </a>
@@ -33,16 +34,19 @@
 
               <div class="navbar-collapse collapse" id="navbar2">
                 <ul class="navbar-nav w-100 justify-content-start">
-                  <li class="nav-item">
-                    <a href="{{#with (and site.url site.homeUrl)}}{{@root.site.url}}{{this}}{{else}}{{siteRootPath}}{{/with}}" class="nav-link">
+                  {{#with (nav-groups)}}
+
+                  <li class="nav-item {{#if (nav-group-selected "home")}}nav-item-selected{{/if}}"">
+                    <a href="{{#if (and @root.site.url @root.site.homeUrl)}}{{@root.site.url}}{{@root.site.homeUrl}}{{else}}{{siteRootPath}}{{/if}}" class="nav-link">
                       <i class="fas fa-home"></i>
                     </a>
                   </li>
-                  {{#each (nav-groups)}}
+                  {{#each this}}
                   {{#if ./url}}
-                  <li class="nav-item">
+                  <li class="nav-item {{#if (nav-group-selected this)}}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>
@@ -52,6 +56,7 @@
                   </li>
                   {{/if}}
                   {{/each}}
+                  {{/with}}
                 </ul>
               </div>
               <div class="primary-action">