Fix top level Menu UI functionality

Author: rakeshAlgo

src/js/01-nav.js

@@ -156,9 +156,26 @@
       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'
+          console.log(navMenuControl)
+        }
+
+        // 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) {
 

src/partials/nav-tree.hbs

@@ -2,7 +2,7 @@
 {{#each navigation}}
 {{#if (eq ../crumbAtLevel this)}}
 {{#if ( eq ../crumbLevel 0 or eq ../crumbLevel 1 or eq ../crumbLevel 2 or eq ../crumbLevel 3)}}
-<div class="main-nav-parent new ">
+<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>