MODx Documentation Side Menu Enhancements

With the documentation site MODX Extras | MODX Documentation, in the sidebar scrolling menu, have you considered adding some JavaScript to center the side menu on the active element when changing pages?

Something like the following perhaps.

// Center Side Menu on Active Element
window.onload = function() {
	var container = document.getElementByID('nav');
    var activeElement = container.querySelector('..c-nav__item--activepage');
    if (activeElement) {
        activeElement.scrollIntoView({ behavior: 'auto', block: 'center' });
    }
};

Second, perhaps also a quick-search box at the top to filter all the menu items. The following might work, or should be close.

// Search and Filter the Side Menu
<input type="search" id="searchbox" onkeyup="searchNav()" placeholder="Menu Search" />

document.getElementById('searchbox').addEventListener('input', searchNav);

function searchNav() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('searchbox');
  filter = input.value.toUpperCase();
  ul = document.getElementById("nav");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

Hi @pixelstuff. The docs.modx.org site is hosted by the MODX team, however, the documentation and it’s architecture is open source and managed at GitHub. The DocsApp GitHub project is where such changes are proposed. It would be worthwihile submitting a Pull Request and or file an Issue with a Pull Request.

1 Like