From 864e6b969d41327661320d01bad32040db9c6d76 Mon Sep 17 00:00:00 2001
From: Baz Utsahajit <baz.utsahajit@play.co>
Date: Wed, 21 Feb 2024 18:26:23 +0000
Subject: [PATCH] Revert Hiding Namespace Items on Non-Searching Navigation

---
 src/static/index.ts                       | 51 ++++++++++++++++++++---
 src/static/styles/navigation.scss         |  7 ++--
 tmpl/components/container-navigation.tmpl |  3 +-
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/static/index.ts b/src/static/index.ts
index 97717cf..3e613a5 100644
--- a/src/static/index.ts
+++ b/src/static/index.ts
@@ -56,8 +56,8 @@ $(() =>
 
     if ($currentItem.length)
     {
-    // if a child then show the top level parent and highlight the
-    // current item.
+        // if a child then show the top level parent and highlight the
+        // current item.
         if ($currentItem.parents('.children').length)
         {
             $currentItem.addClass('current');
@@ -65,14 +65,55 @@ $(() =>
             $currentItem.find('li.item').addClass('notCurrent');
             $currentItem = $currentItem.parents('ul.list>li.item');
         }
-        $currentItem.remove().prependTo($list).addClass('current');
+        $currentItem.addClass('current');
     }
 
     const $search = $('.search');
     const $items = $nav.find('.item');
 
-    // Store the original ordering of the items
-    const originalOrder = $items.toArray();
+    // Store the original ordering of the items with the namespace items sorted alphabetically.
+    const originalOrder = $items.toArray().sort((a, b) =>
+    {
+        const isACurrent = a.classList.contains('current');
+        const isBCurrent = b.classList.contains('current');
+
+        // 'current' or active item should come first.
+        if (isACurrent && !isBCurrent)
+        {
+            return -1;
+        }
+        else if (!isACurrent && isBCurrent)
+        {
+            return 1;
+        }
+
+        // Sort the namespace items alphabetically.
+        const isANamespaceItem = a.classList.contains('namespaceItem');
+        const isBNamespaceItem = b.classList.contains('namespaceItem');
+
+        if (isANamespaceItem && isBNamespaceItem)
+        {
+            const nameA = a.getAttribute('data-name')?.split('.').pop() ?? '';
+            const nameB = b.getAttribute('data-name')?.split('.').pop() ?? '';
+
+            return nameA.localeCompare(nameB);
+        }
+        // Prioritize namespace items.
+        else if (isANamespaceItem)
+        {
+            return 1;
+        }
+        else if (isBNamespaceItem)
+        {
+            return -1;
+        }
+
+        return 0;
+    });
+
+    // Apply the sorted original order.
+    $('.list').empty().append(originalOrder);
+
     const searchInput = document.getElementById('search') as HTMLInputElement;
 
     // Search input
diff --git a/src/static/styles/navigation.scss b/src/static/styles/navigation.scss
index 8c6add2..400a31e 100644
--- a/src/static/styles/navigation.scss
+++ b/src/static/styles/navigation.scss
@@ -143,9 +143,10 @@
     .item {
       display: block;
 
-      &.namespaceItem {
-        display: none;
-      }
+      // -- Enable to hide namespace members from the list while not searching --
+      // &.namespaceItem {
+      //   display: none;
+      // }
 
       &.current {
         display: block;
diff --git a/tmpl/components/container-navigation.tmpl b/tmpl/components/container-navigation.tmpl
index c8b8afb..0410562 100644
--- a/tmpl/components/container-navigation.tmpl
+++ b/tmpl/components/container-navigation.tmpl
@@ -16,9 +16,8 @@ var canStyleAsNamespace = function(item) {
     <?js
     const process = (item) => {
         const isNamespace = canStyleAsNamespace(item);
-        const isNamespaceItem = item.path.includes(".");
     ?>
-        <li class="item <?js= isNamespaceItem ? 'namespaceItem' : ''?>" data-name="<?js= (item.type === 'tutorial' ? 'tutorial-' : '') + item.path ?>">
+        <li class="item <?js= !isNamespace ? 'namespaceItem' : ''?>" data-name="<?js= (item.type === 'tutorial' ? 'tutorial-' : '') + item.path ?>">
             <span class="title <?js if (isNamespace) { ?>namespace<?js } ?> <?js if (item.deprecated) { ?>status-deprecated<?js } ?>">
                 <?js if (isNamespace) { ?>
                 <span class="namespaceTag">