Merge pull request #3137 from mineralsfree/ENT-10267

ENT-10267: docs navigation doesn't show user's location
cfengine · Jan 4, 2024 · 9049302 · 9049302
2 parents 3fd35e1 + c73de06
commit 9049302
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/generator/_assets/js/custom.js b/generator/_assets/js/custom.js
@@ -186,13 +186,22 @@ document.querySelector('.top_menu-versions-title > span > span').innerText = doc
 
 var mainMenuCopy = document.querySelector('.left-menu ul.mainMenu').cloneNode(true);
 var clickedMenuHistory = [{href: './', name: 'Home'}];
+
+var urlPaths = document.location.pathname.split('/');
+var url = urlPaths[urlPaths.length - 1]; // get last url part
+var currentMenuItem = document.querySelector('.left-menu li[data-url="'+ url +'"]');
+
 var renderNestedMenu = function (href) {
     if (href == null) {
         document.querySelector('.left-menu ul.mainMenu').replaceWith(mainMenuCopy);
     } else {
         var ul = mainMenuCopy.querySelector('li[data-url="'+ href +'"]').querySelector('ul').cloneNode(true);
         ul.classList.add('mainMenu');
         document.querySelector('.left-menu ul.mainMenu').replaceWith(ul);
+        var selected = document.querySelector('li[data-url="'+ url +'"]');
+        if (selected){
+            selected.className += ' opened current';
+        }
     }
 
     applyOnclickToMenuItems();
@@ -234,11 +243,12 @@ var buildBreadcrumbs = function (items) {
     })
     leftMenuBreadcrumbs.innerHTML = html;
     var lastItem = items[items.length - 1];
-    selectedMenu.innerHTML = lastItem.name !== 'Home' ?
-        '<a href="'+ lastItem.href +'">'+ lastItem.name +' <i class="bi bi-box-arrow-up-right"></i></a>' :
-        '';
+    if (window.innerWidth < 1024){
+        selectedMenu.innerHTML = lastItem.name !== 'Home' ?
+            '<a href="'+ lastItem.href +'">'+ lastItem.name +' <i class="bi bi-box-arrow-up-right"></i></a>' :
+            '';
+    }
 }
-buildBreadcrumbs(clickedMenuHistory);
 
 document.querySelector('.menu-back').onclick = function () {
     if (clickedMenuHistory.length != 1) {
@@ -249,21 +259,34 @@ document.querySelector('.menu-back').onclick = function () {
     }
 }
 
-var urlPaths = document.location.pathname.split('/');
-var url = urlPaths[urlPaths.length - 1]; // get last url part
-var currentMenuItem = document.querySelector('.left-menu li[data-url="'+ url +'"]');
+
+
 if (currentMenuItem != null) {
     currentMenuItem.className += ' opened current';
+    var menuHistory = [];
+    var currentLink = currentMenuItem.querySelector('a');
+    // if selected menu item is a parent we show children on mobile menu
+    if (currentLink && currentMenuItem.classList.contains('parent')){
+        menuHistory.unshift({href: currentLink.getAttribute('href'), name: currentLink.innerText});
+    }
+    var closest = currentMenuItem.closest('ul').closest('li');
 
-    if (window.innerWidth > 1023) { // if the window width more than 1023 then treat the menu as desktop one
-        var closest = currentMenuItem.closest('ul').closest('li');
-        while (true) {
-            if (!closest) break;
+    while (true) {
+        if (!closest) break;
+        if (window.innerWidth > 1023) { // if the window width more than 1023 then treat the menu as desktop one
             closest.classList.add('opened');
-            closest = closest.closest('ul').closest('li');
+        } else {
+            // Restore history from html
+            var link = closest.querySelector('a');
+            if (link){
+                menuHistory.unshift({href: link.getAttribute('href'), name: link.innerText});
+            }
         }
+        closest = closest.closest('ul').closest('li');
     }
+    clickedMenuHistory = clickedMenuHistory.concat(menuHistory);
 }
+buildBreadcrumbs(clickedMenuHistory);
 
 if (window.innerWidth > 1023) {
     document.querySelectorAll('.mainMenu li.parent > i').forEach(function (element) {
@@ -272,6 +295,10 @@ if (window.innerWidth > 1023) {
             element.closest('li.parent').classList.toggle('opened');
         }
     });
+} else {
+    // Small screen
+    var lastHistoryElement = clickedMenuHistory[clickedMenuHistory.length - 1];
+    renderNestedMenu(lastHistoryElement.href);
 }
 
 function fillVersionWrapperSelect(url) {

diff --git a/generator/_assets/styles/less/menu.less b/generator/_assets/styles/less/menu.less
@@ -107,6 +107,9 @@ aside {
             width: 33rem;
             z-index: -1;
             top: 0;
+            @media @tablet-down{
+              width: 38rem;
+            }
           }
 
           > a {