Filter article titles in TOC of docs page

src/main/content/antora_ui/src/js/01-nav.js

@@ -71,8 +71,15 @@ var navigation = (function(){
       if (e.detail > 1) e.preventDefault();
     });
 
+    $('#filter_titles').on('keyup', filterNavTitles);
+
+    $('#clear_filter').on("click", function () {
+      $('#filter_titles').val('');
+      filterNavTitles();
+    })
   };
 
+
   $('.components .versions li a').on('click', function(e){
     e.stopPropagation();
     location.href = $(this)[0].href;
@@ -153,10 +160,62 @@ var navigation = (function(){
     }
   }
 
+  //Filter article titles in TOC using text input
+  function filterNavTitles(){
+    let input = $('#filter_titles').val().toLowerCase();
+    let title_match=false;
+    if(input==='' ){
+      $('#clear_filter, .no-results-container').hide();
+      $(".nav-menu > .nav-list > .nav-item").addClass('is-active');
+      $('.nav-menu > .nav-list >.nav-item .nav-item').has('.nav-item-toggle').removeClass('is-active');
+      $('.nav-item').each(function() {
+        if ($(this).css('display') === 'none') {
+            $(this).css('display', '');
+        }
+      });
+      return;
+    } 
+    $('#clear_filter').show();
+    let articles = $('.nav-link , .nav-menu .nav-text');
+    articles.parent().hide();
+    articles.each(function() {
+      let article = $(this);
+      let title = article.text().toLowerCase();
+      if (title.includes(input)) {
+        title_match=true;
+        article.parent().show();
+        article.parent().has('.nav-item-toggle').removeClass('is-active');
+        showAncestors(article.parent());
+        showDescendants(article.parent());
+      }
+    });
+    if(!title_match){
+      $('.no-results-container').show();
+    }
+  }
+
+  function showAncestors(item){
+    let parent = item.parents('.nav-item');
+    parent.each(function() {
+      $(this).show();
+      $(this).has('.nav-item-toggle').addClass('is-active');
+    });
+  }
+
+  function showDescendants(item) {
+    let children = item.find('.nav-item');
+    children.each(function() {
+      $(this).show();
+      $(this).has('.nav-item-toggle').removeClass('is-active');
+    });
+  }
+
   return {
     init: init,
     activateCurrentPath: activateCurrentPath,
-    scrollItemToMidpoint: scrollItemToMidpoint
+    scrollItemToMidpoint: scrollItemToMidpoint,
   };
 })();
 navigation.init();
+
+

src/main/content/antora_ui/src/partials/nav-menu.hbs

@@ -1,6 +1,18 @@
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu" aria-label="Navigation menu for Open Liberty docs">
+    <div class="nav-menu-filter" >
+      <input type="text" id="filter_titles" aria-label="Filter titles" placeholder="Filter titles...">
+      <button
+        id="clear_filter"
+        type="reset"
+        tabindex="0"
+        aria-label="Clear filter search"
+      >X</button>
+    </div>  
     <h3 class="title"><a href="{{relativize page.componentVersion.url}}">{{page.component.title}}</a></h3>
+    <div class="no-results-container">
+      <b>No titles match</b> 
+    </div>
     {{#if page.navigation}}
     {{> nav-tree navigation=page.navigation}}
     {{/if}}

src/main/content/antora_ui/src/sass/nav.scss

@@ -475,3 +475,33 @@ html.is-clipped--nav {
   white-space: nowrap;
   display: inline-block;
 }
+
+.nav-menu-filter{
+  margin: 0 19px 20px;
+  color: #5d6a8e;
+  #filter_titles{
+    background-color: #eeeff3;
+    border: 0;
+    border-radius: 3px;
+    padding: 4px 22px 4px 0.5rem;
+    width: 100%;
+  }
+  #clear_filter{
+    font-size: 14px;
+    position: absolute;
+    right: 20px;
+    background-color: transparent;
+    border: 0;
+    top: 6px;
+    display: none;
+  }
+}
+
+.no-results-container{
+  display: none;
+  font-size: 14px;
+  color: #5d6a8e;
+  margin: 0 19px 20px;
+  letter-spacing: 0.2px;
+}
+