Merge pull request #192 from couchbase/DOC-13288-ia-support

DOC-13288 IA support for nested top-nav

Tested on staging with @RichardSmedley @TimLFletcher and merging in for IA of Enterprise Analytics GA

Author: osfameron

preview-src/ui-model.yml

@@ -8,8 +8,22 @@ site:
     navGroups: |
       [
         { "title": "Server", "startPage": "home::server.adoc", "components": ["server", "*-connector"], "url": "/index.html" },
-        { "title": "Mobile", "startPage": "home::mobile.adoc", "components": ["couchbase-lite", "sync-gateway"], "url": "#" },
-        { "title": "Cloud", "startPage": "home::cloud.adoc", "components": ["operator"], "url": "#" }
+        { "title": "Develop",
+          "subPages": [
+            {
+              "title": "Mobile",
+              "startPage": "home::mobile.adoc",
+              "components": ["couchbase-lite", "sync-gateway"],
+              "url": "#"
+            },
+            {
+              "title": "Cloud",
+              "startPage": "home::cloud.adoc",
+              "components": ["operator"],
+              "url": "#"
+            }
+          ]
+        }
       ]
   components:
     server:

src/css/header.css

@@ -89,6 +89,18 @@
   padding: var(--base-extra-small-space) var(--base-space);
 }
 
+.navbar-nav .nav-item .nav-submenu {
+  display: none;
+  padding-inline-start: 0;
+  position: absolute;
+  background-color: #333; /* var(--color-brand-black); */
+  z-index: 1000;
+}
+
+.navbar-nav .nav-item:hover .nav-submenu {
+  display: block;
+}
+
 .navbar-nav .nav-link {
   color: var(--color-brand-white);
   text-transform: uppercase;
@@ -217,11 +229,23 @@
   left: -0.75em;
 }
 
-.nav-item-selected {
+.nav-item-selected,
+.nav-submenu-item-selected,
+.nav-item-selected:hover .nav-submenu-item:hover {
   background-color: var(--color-brand-red);
 }
 
-.Columnar .nav-item-selected {
+.nav-item-selected:hover {
+  background-color: inherit;
+}
+
+.nav-item-selected:hover .nav-submenu-item-selected {
+  background-color: #f99;
+}
+
+.Columnar .nav-item-selected,
+.Columnar .nav-submenu-item-selected,
+.nav-item-selected:hover .Columnar .nav-submenu-item:hover {
   background-color: var(--color-brand-caution);
 }
 

src/helpers/nav-group-for-page.js

@@ -9,9 +9,23 @@ module.exports = (
   }
 ) => {
   const pageUrl = page.url
-  const navGroupByUrl = navGroups.find(({ url }) => url === pageUrl)
-  if (navGroupByUrl) return navGroupByUrl
+
+  const navGroupsAndSubgroups = [
+    ...navGroups,
+    ...navGroups.flatMap(({ subGroups }) => subGroups || [])]
+
+  const navGroupByUrl =
+    navGroupsAndSubgroups.find(({ url }) => url === pageUrl)
+
+  if (navGroupByUrl) {
+    return navGroupByUrl
+  }
+
   const pageComponentName = page.component.name
-  if (pageComponentName === 'home' && page.module !== 'contribute') return
-  return navGroups.find(({ components }) => ~components.indexOf(pageComponentName))
+  if (pageComponentName === 'home' && page.module !== 'contribute') {
+    return
+  }
+
+  return navGroupsAndSubgroups.find(
+    ({ components }) => ~components.indexOf(pageComponentName))
 }

src/helpers/nav-group-selected.js

@@ -19,5 +19,6 @@ module.exports = module.exports = (navGroup, {
 
 function selected (navGroup, page) {
   return (navGroup.url === page?.url) ||
-    (navGroup.components?.includes(page.component?.name))
+    (navGroup.components?.includes(page.component?.name)) ||
+    (navGroup.subGroups?.some((it) => selected(it, page)))
 }

src/helpers/nav-groups.js

@@ -9,25 +9,35 @@ module.exports = ({
 
   if (!navGroups) return []
   if (navGroups._compiled) return navGroups
+  navGroups = JSON.parse(navGroups)
 
   const components = site.components
   const componentNames = Object.keys(components)
-  const claimed = []
+  const claimed = [] // mutable array to track claimed components
 
-  navGroups = JSON.parse(navGroups).map((navGroup) => {
+  function processNavGroup (navGroup) {
     const componentNamesInGroup =
       (navGroup.components || []).flatMap(
+        // componentNamesInGroup can be a name like 'couchbase-lite'
+        // or a glob pattern like '*-sdk'
         (componentName) => componentNames.filter(globbify(componentName)))
 
     claimed.push(...componentNamesInGroup)
 
+    const navSubgroups = navGroup.subGroups?.map(processNavGroup)
+    if (navSubgroups) {
+      navGroup.subGroups = navSubgroups
+      console.log(navSubgroups)
+    }
+
     return compileNavGroup(
       navGroup,
       componentNamesInGroup,
       contentCatalog,
       components)
-  })
+  }
 
+  navGroups = navGroups.map(processNavGroup)
   const orphaned = componentNames.filter((it) => !claimed.includes(it))
 
   if (orphaned.length) {

src/partials/header-content.hbs

@@ -42,7 +42,7 @@
                     </a>
                   </li>
                   {{#each this}}
-                  {{#if ./url}}
+                  {{#if (or ./url ./subGroups)}}
                   <li class="nav-item {{#if (nav-group-selected this)}}nav-item-selected{{/if}}">
                     <a class="nav-link" href="{{relativize ./url}}">
                       {{{./title}}}
@@ -53,6 +53,17 @@
                       </span>
                       {{/if}}
                     </a>
+                    {{#with ./subGroups}}
+                    <ul class="nav-submenu">
+                      {{#each this}}
+                      <li class="nav-item nav-submenu-item {{#if (nav-group-selected this)}}nav-submenu-item-selected{{/if}}">
+                        <a class="nav-link nav-submenu-link" href="{{relativize ./url}}">
+                          {{{./title}}}
+                        </a>
+                      </li>
+                      {{/each}}
+                    </ul>
+                    {{/with}}
                   </li>
                   {{/if}}
                   {{/each}}