From e98328fabc3a51e363bed2e1837e05fb320aa776 Mon Sep 17 00:00:00 2001
From: Sharad Regoti <sharadregoti15@gmail.com>
Date: Fri, 26 Sep 2025 14:31:53 +0530
Subject: [PATCH 1/3] Working Side Nav

---
 developer-support/release-notes/dashboard.mdx |   4 +
 .../release-notes/helm-chart.mdx              |   2 +
 toc.css                                       |  57 ++++++++
 toc.js                                        | 131 ++++++++++++++++++
 4 files changed, 194 insertions(+)
 create mode 100644 toc.css
 create mode 100644 toc.js

diff --git a/developer-support/release-notes/dashboard.mdx b/developer-support/release-notes/dashboard.mdx
index 790df28b..ea882d64 100644
--- a/developer-support/release-notes/dashboard.mdx
+++ b/developer-support/release-notes/dashboard.mdx
@@ -35,6 +35,7 @@ For a comprehensive list of changes, please refer to the detailed [changelog](#C
 There are no breaking changes in this release.
 
 <h4 className="dependencies-5.9.2">Dependencies</h4>
+
 | Dashboard Version | Recommended Releases | Backwards Compatibility |
 | :-------- | :------------------- | :------------- |
 | 5.9.2  | MDCB v2.8.4       | MDCB v2.8.4 |
@@ -46,6 +47,7 @@ There are no breaking changes in this release.
 |        | TIB (if using standalone) v1.7.0 | TIB all versions |
 
 <h5 className="3rdPartyTools-v5.9.1">3rd Party Dependencies & Tools</h5>
+
 | Third Party Dependency | Tested Versions | Compatible Versions | Comments | 
 | :---------------------- | :--------------- | :------------------- | :-------- | 
 | [GoLang](https://go.dev/dl/)          | 1.23 | 1.23 | [Go plugins](/api-management/plugins/golang) must be built using Go 1.23 | 
@@ -61,6 +63,7 @@ There are no breaking changes in this release.
 There are no deprecations in this release.
 
 <h4 className="upgrade-5.9.2">Upgrade instructions</h4>
+
 To resolve the compatibility issue between MDCB and Tyk Dashboard when Tyk OAS API definition paths contain dot (.) characters, you can choose **one** of the following upgrade paths:
 
 ##### Recommended Upgrade Paths
@@ -89,6 +92,7 @@ If you are upgrading to 5.9.2, please follow the detailed [upgrade instructions]
 Please note that the Tyk Helm Charts are configured to install the LTS version of Tyk Dashboard. You will need to modify them to install v5.9.2.
 
 <h4 className="Changelog-v5.9.2">Changelog</h4>
+
 ##### Fixed
 
 <ul>
diff --git a/developer-support/release-notes/helm-chart.mdx b/developer-support/release-notes/helm-chart.mdx
index f627f41c..13444b94 100644
--- a/developer-support/release-notes/helm-chart.mdx
+++ b/developer-support/release-notes/helm-chart.mdx
@@ -30,6 +30,7 @@ For a comprehensive list of changes, please refer to the detailed [changelog](#C
 Tyk Charts 3.0 introduces a breaking configuration changes for Tyk Dashboard: To provide a default secure configuration, `security.forbid_admin_view_access_token` and `security.forbid_admin_reset_access_token` are set to `true` to restrict admin users from being able to view and reset other users' Dashboard API Access Credentials.
 
 <h4 className="dependencies-3.0">Dependencies</h4>
+
 ##### 3rd Party Dependencies & Tools
 | Third Party Dependency                                     | Tested Versions        | Compatible Versions    | Comments | 
 | :---------------------------------------------------------- | :---------------------- | :---------------------- | :-------- | 
@@ -62,6 +63,7 @@ helm upgrade [RELEASE_NAME] tyk-helm/[CHART_NAME]
 - [ArtifactHub - tyk-oss](https://artifacthub.io/packages/helm/tyk-helm/tyk-oss/3.0.0)
 
 <h4 className="Changelog-v3.0.0">Changelog</h4>
+
 ##### Added
 
 <ul>
diff --git a/toc.css b/toc.css
new file mode 100644
index 00000000..4f343c6d
--- /dev/null
+++ b/toc.css
@@ -0,0 +1,57 @@
+/* General TOC container */
+#table-of-contents-content {
+    padding-left: 0;
+}
+
+/* Each TOC item */
+#table-of-contents-content .toc-item {
+    list-style: none;
+    padding: 2px 0;
+}
+
+/* Flex container for anchor and toggle */
+#table-of-contents-content .toc-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+/* Anchor link styling */
+#table-of-contents-content .toc-row a {
+    flex-grow: 1; /* Allow anchor to take available space */
+    text-decoration: none;
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Toggle button styling */
+.toc-toggle {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    padding: 0 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0; /* Prevent toggle from shrinking */
+}
+
+.toc-toggle:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
+    border-radius: 4px;
+}
+
+/* Chevron icon transition */
+.toc-toggle svg {
+    transition: transform 150ms ease-in-out;
+}
+
+/* Rotated state for chevron when collapsed */
+.toc-toggle.rotated svg {
+    transform: rotate(-90deg);
+}
diff --git a/toc.js b/toc.js
new file mode 100644
index 00000000..a98f9f57
--- /dev/null
+++ b/toc.js
@@ -0,0 +1,131 @@
+// toc-fix-v2.js
+(function () {
+    let observer;
+
+    function run() {
+        const toc = document.getElementById('table-of-contents-content');
+        if (!toc || toc.dataset.enhanced === 'true') {
+            return;
+        }
+        toc.dataset.enhanced = 'true';
+
+        // Disconnect the observer while we modify the DOM to prevent infinite loops
+        if (observer) observer.disconnect();
+
+        const items = Array.from(toc.querySelectorAll('.toc-item'));
+
+        // Normalize depths, fix NaN, and set initial styles
+        items.forEach(li => {
+            let depthNum = Number(li.getAttribute('data-depth'));
+            if (!Number.isFinite(depthNum)) {
+                depthNum = 2; // Fix for h4 headers producing NaN
+            }
+            li.dataset.depth = String(depthNum);
+            li.style.display = 'list-item'; // Ensure all items are visible initially
+
+            const a = li.querySelector('a');
+            if (a) {
+                const indentStep = 1; // rem per depth level
+                a.style.marginLeft = `${depthNum * indentStep}rem`;
+            }
+        });
+
+        // Add toggle buttons and functionality
+        items.forEach((li, idx) => {
+            const depth = Number(li.dataset.depth);
+
+            // Detect if this item has children
+            const hasChild = idx + 1 < items.length && Number(items[idx + 1].dataset.depth) > depth;
+            if (!hasChild) return;
+
+            // Prevent adding duplicate toggles if script re-runs
+            if (li.querySelector('.toc-toggle')) return;
+
+            const toggle = document.createElement('button');
+            toggle.type = 'button';
+            toggle.className = 'toc-toggle';
+            toggle.setAttribute('aria-expanded', 'true');
+            toggle.innerHTML = `
+                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" focusable="false">
+                  <path d="M8.5 10.5 L12 14 L15.5 10.5" stroke="currentColor" stroke-width="1.6" fill="none"
+                        stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              `;
+
+            const anchor = li.querySelector('a');
+            if (anchor) {
+                const wrapper = document.createElement('div');
+                wrapper.className = 'toc-row';
+                // Insert wrapper before the anchor, then move anchor and toggle into it
+                anchor.parentNode.insertBefore(wrapper, anchor);
+                wrapper.appendChild(anchor);
+                wrapper.appendChild(toggle);
+            } else {
+                li.appendChild(toggle);
+            }
+
+            li.dataset.collapsed = 'false';
+
+            toggle.addEventListener('click', e => {
+                e.preventDefault();
+                const isCollapsed = li.dataset.collapsed === 'true';
+                
+                // Toggle the state
+                li.dataset.collapsed = String(!isCollapsed);
+                toggle.setAttribute('aria-expanded', String(!isCollapsed));
+                toggle.classList.toggle('rotated', !isCollapsed);
+
+                // Update visibility of all descendant items
+                for (let k = idx + 1; k < items.length; k++) {
+                    const childItem = items[k];
+                    const childDepth = Number(childItem.dataset.depth);
+
+                    if (childDepth <= depth) {
+                        break; // Exited the subtree of the clicked item
+                    }
+
+                    if (!isCollapsed) {
+                        // If we are COLLAPSING, hide all descendants
+                        childItem.style.display = 'none';
+                    } else {
+                        // If we are EXPANDING, only reveal direct children
+                        // Deeper children remain hidden if their own parent is collapsed
+                        if (childDepth === depth + 1) {
+                            childItem.style.display = 'list-item';
+                        }
+                    }
+                }
+            });
+        });
+
+        // Reconnect the observer after DOM modifications are complete
+        if (observer) {
+            observer.observe(document.body, { childList: true, subtree: true });
+        }
+    }
+
+    function init() {
+        run(); // Run on initial load
+
+        // Set up an observer to re-run the script on SPA navigation
+        observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.addedNodes.length > 0) {
+                    const toc = document.getElementById('table-of-contents-content');
+                    // If a TOC exists and it hasn't been enhanced yet, run the script
+                    if (toc && !toc.dataset.enhanced) {
+                        run();
+                        break; // Found and processed a new TOC, no need to check other mutations
+                    }
+                }
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();

From 4c9770b6559fa88355cfe28359322ef0ce44718b Mon Sep 17 00:00:00 2001
From: Sharad Regoti <sharadregoti15@gmail.com>
Date: Mon, 6 Oct 2025 18:36:08 +0530
Subject: [PATCH 2/3] Remove ellipse for wrapping

---
 toc.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/toc.css b/toc.css
index 4f343c6d..753712ff 100644
--- a/toc.css
+++ b/toc.css
@@ -22,9 +22,8 @@
     flex-grow: 1; /* Allow anchor to take available space */
     text-decoration: none;
     color: inherit;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    word-wrap: break-word;
+    white-space: normal;
 }
 
 /* Toggle button styling */

From ac15d8f6ca6570db345a5baedaf80415fd36c2ba Mon Sep 17 00:00:00 2001
From: Sharad Regoti <sharadregoti15@gmail.com>
Date: Wed, 8 Oct 2025 13:20:01 +0530
Subject: [PATCH 3/3] Added Docs

---
 toc.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/toc.js b/toc.js
index a98f9f57..7d6a16bb 100644
--- a/toc.js
+++ b/toc.js
@@ -1,3 +1,7 @@
+// This script enhances the Table of Contents (TOC) / right side navigation of Mintliffy by adding collapsible/expandable sections based on header depth.
+// It also fixes issues with incorrect depth values for custom anchor tags and ensures proper indentation and visibility of TOC items.
+// But custom anchor tags are not used anymore in our repository. So that part is not needed anymore.
+
 // toc-fix-v2.js
 (function () {
     let observer;