From 2d461f41a94143c91c569f46978811f31165800f Mon Sep 17 00:00:00 2001
From: David Mosberger-Tang <davidm@egauge.net>
Date: Wed, 18 Dec 2024 20:49:13 -0700
Subject: [PATCH 1/3] feat: add option `sideNavLayout`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add support for theme option `sideNavLayout`.  If set to `factored`,
the side-nav menu will group items that share a common path prefix.

For example, if the default layout for side-nav looked like this:

	/config        >
        /config/alert  >
        /config/bacnet >
        /config/modbus >
        /log           >

Then the factored side-nav would look like this:

	/config        >
        /log           >

and after expanding /config, you'd see:

	/config        v
          GET /config
          PUT /config
          …/alert      >
          …/bacnet     >
          …/modbus     >
        /log           >

Note that this commit also updates the styling to show a vertical line
to the left of all side-bar <ul> lists that are not at the root level.
This probably should be configurable.
---
 src/components/SideMenu/MenuItems.tsx      |  1 +
 src/components/SideMenu/styled.elements.ts |  4 ++-
 src/services/MenuBuilder.ts                | 36 +++++++++++++++++++++-
 src/services/RedocNormalizedOptions.ts     |  7 +++++
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/components/SideMenu/MenuItems.tsx b/src/components/SideMenu/MenuItems.tsx
index af9ab197a2..142aa0e166 100644
--- a/src/components/SideMenu/MenuItems.tsx
+++ b/src/components/SideMenu/MenuItems.tsx
@@ -26,6 +26,7 @@ export class MenuItems extends React.Component<MenuItemsProps> {
         className={className}
         style={this.props.style}
         $expanded={expanded}
+        root={root || false}
         {...(root ? { role: 'menu' } : {})}
       >
         {items.map((item, idx) => (
diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
index 33de76ab3b..3d5249d35e 100644
--- a/src/components/SideMenu/styled.elements.ts
+++ b/src/components/SideMenu/styled.elements.ts
@@ -84,7 +84,7 @@ function menuItemActive(
   }
 }
 
-export const MenuItemUl = styled.ul<{ $expanded: boolean }>`
+export const MenuItemUl = styled.ul<{ $expanded: boolean; root: boolean }>`
   margin: 0;
   padding: 0;
 
@@ -97,6 +97,8 @@ export const MenuItemUl = styled.ul<{ $expanded: boolean }>`
   }
 
   ${props => (props.$expanded ? '' : 'display: none;')};
+  ${props => (props.root ? '' : 'margin-left: 8px;')};
+  ${props => (props.root ? '' : 'border-left: 1px solid lightblue;')}
 `;
 
 export const MenuItemLi = styled.li<{ depth: number }>`
diff --git a/src/services/MenuBuilder.ts b/src/services/MenuBuilder.ts
index 4ad28f7b77..bbf7bb9cba 100644
--- a/src/services/MenuBuilder.ts
+++ b/src/services/MenuBuilder.ts
@@ -28,7 +28,41 @@ export class MenuBuilder {
     } else {
       items.push(...MenuBuilder.getTagsItems(parser, tagsMap, undefined, undefined, options));
     }
-    return items;
+
+    if (options.sideNavLayout !== 'factored') return items;
+
+    return MenuBuilder.factorByPrefix(items);
+  }
+
+  static factorByPrefix(items: ContentItemModel[]): ContentItemModel[] {
+    const newItems: ContentItemModel[] = [];
+    let newChildren: ContentItemModel[] = [];
+    let parent: GroupModel | null = null;
+    let prefix = '';
+    for (const item of items) {
+      if (parent && item.name.startsWith(prefix)) {
+        item.parent = parent;
+        item.depth = parent.depth + 1;
+        newChildren.push(item);
+      } else {
+        if (newChildren.length > 0) {
+          for (const child of MenuBuilder.factorByPrefix(newChildren)) {
+            if (child.sidebarLabel.startsWith(prefix)) {
+              child.sidebarLabel = '…' + child.sidebarLabel.slice(prefix.length - 1);
+            }
+            parent!.items.push(child);
+          }
+          newChildren = [];
+        }
+
+        newItems.push(item);
+        if (item instanceof GroupModel) {
+          parent = item;
+          prefix = item.name + '/';
+        } else parent = null;
+      }
+    }
+    return newItems;
   }
 
   /**
diff --git a/src/services/RedocNormalizedOptions.ts b/src/services/RedocNormalizedOptions.ts
index 0cdd7f9e2a..ade97680b7 100644
--- a/src/services/RedocNormalizedOptions.ts
+++ b/src/services/RedocNormalizedOptions.ts
@@ -27,6 +27,7 @@ export interface RedocRawOptions {
   onlyRequiredInSamples?: boolean | string;
   showExtensions?: boolean | string | string[];
   sideNavStyle?: SideNavStyleEnum;
+  sideNavLayout?: 'default' | 'factored';
   hideSingleRequestSampleTab?: boolean | string;
   hideRequestPayloadSample?: boolean;
   menuToggle?: boolean | string;
@@ -180,6 +181,10 @@ export class RedocNormalizedOptions {
     }
   }
 
+  static normalizeSideNavLayout(value: RedocRawOptions['sideNavLayout']): 'default' | 'factored' {
+    return value === 'factored' ? value : 'default';
+  }
+
   static normalizePayloadSampleIdx(value: RedocRawOptions['payloadSampleIdx']): number {
     if (typeof value === 'number') {
       return Math.max(0, value); // always greater or equal than 0
@@ -231,6 +236,7 @@ export class RedocNormalizedOptions {
   onlyRequiredInSamples: boolean;
   showExtensions: boolean | string[];
   sideNavStyle: SideNavStyleEnum;
+  sideNavLayout: 'default' | 'factored';
   hideSingleRequestSampleTab: boolean;
   hideRequestPayloadSample: boolean;
   menuToggle: boolean;
@@ -303,6 +309,7 @@ export class RedocNormalizedOptions {
     this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
     this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
     this.sideNavStyle = RedocNormalizedOptions.normalizeSideNavStyle(raw.sideNavStyle);
+    this.sideNavLayout = RedocNormalizedOptions.normalizeSideNavLayout(raw.sideNavLayout);
     this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
     this.hideRequestPayloadSample = argValueToBoolean(raw.hideRequestPayloadSample);
     this.menuToggle = argValueToBoolean(raw.menuToggle, true);

From b5c5436fac5a561cfe23feac1aca6f1e88afd827 Mon Sep 17 00:00:00 2001
From: David Mosberger-Tang <davidm@egauge.net>
Date: Thu, 19 Dec 2024 09:49:55 -0700
Subject: [PATCH 2/3] fix: allow collapsing a SideNav menu when it is not
 active

It should be possible to collapse a parent item regardless of whether
or not it is the currently active item.  Prior to this fix, clicking
on a parent item's "fold" icon was ignored unless the item was the
currently active one.  With this fix, the parent node and its children
will be collapsed, as expected.
---
 src/components/SideMenu/SideMenu.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/SideMenu/SideMenu.tsx b/src/components/SideMenu/SideMenu.tsx
index cb206ba0cf..ee41880c06 100644
--- a/src/components/SideMenu/SideMenu.tsx
+++ b/src/components/SideMenu/SideMenu.tsx
@@ -38,8 +38,12 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
   }
 
   activate = (item: IMenuItem) => {
-    if (item && item.active && this.context.menuToggle) {
-      return item.expanded ? item.collapse() : item.expand();
+    if (item && this.context.menuToggle) {
+      if (item.expanded) {
+        item.collapse();
+        return;
+      }
+      if (item.active) item.expand();
     }
     this.props.menu.activateAndScroll(item, true);
     setTimeout(() => {

From a86cf3830d35f2f75d5ba8d5959827d66ba3e718 Mon Sep 17 00:00:00 2001
From: David Mosberger-Tang <davidm@egauge.net>
Date: Thu, 19 Dec 2024 14:53:38 -0700
Subject: [PATCH 3/3] fix: when building factored SideNav menu, don't drop
 final children

At the end of the loop, we need to append the remaining new children,
if there are any.
---
 src/services/MenuBuilder.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/services/MenuBuilder.ts b/src/services/MenuBuilder.ts
index bbf7bb9cba..d10d4e5a05 100644
--- a/src/services/MenuBuilder.ts
+++ b/src/services/MenuBuilder.ts
@@ -8,6 +8,15 @@ import type { ContentItemModel, TagGroup, TagInfo, TagsInfoMap } from './types';
 
 export const GROUP_DEPTH = 0;
 
+function appendChildren(parent: ContentItemModel, children: ContentItemModel[], prefix: string) {
+  for (const child of MenuBuilder.factorByPrefix(children)) {
+    if (child.sidebarLabel.startsWith(prefix)) {
+      child.sidebarLabel = '…' + child.sidebarLabel.slice(prefix.length - 1);
+    }
+    parent.items.push(child);
+  }
+}
+
 export class MenuBuilder {
   /**
    * Builds page content structure based on tags
@@ -46,12 +55,7 @@ export class MenuBuilder {
         newChildren.push(item);
       } else {
         if (newChildren.length > 0) {
-          for (const child of MenuBuilder.factorByPrefix(newChildren)) {
-            if (child.sidebarLabel.startsWith(prefix)) {
-              child.sidebarLabel = '…' + child.sidebarLabel.slice(prefix.length - 1);
-            }
-            parent!.items.push(child);
-          }
+          appendChildren(parent!, newChildren, prefix);
           newChildren = [];
         }
 
@@ -62,6 +66,7 @@ export class MenuBuilder {
         } else parent = null;
       }
     }
+    if (newChildren.length > 0) appendChildren(parent!, newChildren, prefix);
     return newItems;
   }