Merge pull request #62 from couchbase/top-level-menu

Remove main menu from top level and show other top menu link

Author: amarantha-k

preview-src/ui-model.yml

@@ -17,6 +17,8 @@ site:
         url: /index.html
         navigation:
         - content: Introduction
+          url: /index.html
+          urlType: fragment
           items:
           - content: Why Couchbase?
             url: '#'

src/js/01-nav.js

@@ -150,8 +150,36 @@
       var topPositon = currentPageMenu.offsetTop
       var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu')
       leftMenu.scrollTop = topPositon
-    }
-  }, 200)
 
+      // show depth 0 child element
+
+      var otherNavs = document.querySelectorAll('.nav-list > .nav-item[data-depth="0"]')
+      otherNavs.forEach(function (nav) {
+        var navSubMenu = Array.from(nav.querySelector('ul.nav-list').children)
+        // var navDataDepth = Array.from(nav.querySelector('ul.nav-list'))
+        navSubMenu.forEach(function (item) {
+          item.classList.remove('is-inactive')
+        })
+
+        // hide main menu for top level navigation -
+
+        if (nav.className.includes('is-current-page')) {
+          navMenuControl.style.display = 'none'
+        }
+
+        // hide in second level menu
+        if (nav.className.includes('is-current-path')) {
+          otherNavs.forEach(function (navItem) {
+            if (!navItem.className.includes('is-current-path')) {
+              navItem.classList.add('is-inactive')
+            }
+          })
+        }
+      })
+      // if(otherNavs) {
+
+      // }
+    }
+  }, 100)
   // clearTimeout(scrollCurrentPageMenu, 20000)
 })()

src/partials/nav-tree.hbs

@@ -1,8 +1,8 @@
 {{#if navigation}}
 {{#each navigation}}
 {{#if (eq ../crumbAtLevel this)}}
-{{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2)}}
-<div class="main-nav-parent new">
+{{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2 or eq ../crumbLevel 3)}}
+<div class="main-nav-parent new " data-depth="{{../level}}">
 <span class="back-to-menu"><i class="fas fa-chevron-left"></i> Main Menu </span>
 {{!-- <span class="nav-text">{{{./content}}}</span> --}}
 </div>
@@ -14,7 +14,7 @@
 {{#each navigation}}
 <li class="nav-item{{#if (eq ../crumbAtLevel this)}}
 {{~#if (eq this (last @root.page.breadcrumbs))}} is-current-page{{~else}} is-current-path{{/if}} is-active
-{{~else if (eq ../level 0)}} {{!--is-active--}} is-inactive{{/if}}{{#if (eq ../crumbAtLevel this (and eq ../level 2))}} is-active-depth-2 {{/if}} " data-depth="{{../level}}">
+{{~else if (eq ../level 1)}} {{!--is-active--}} is-inactive{{/if}}{{#if (eq ../crumbAtLevel this (and eq ../level 2))}} is-active-depth-2 {{/if}} " data-depth="{{../level}}">
 
 {{#if ./content}}
 <span class="nav-line "  data-depth="{{../level}}">