@eventcatalog/core 2.31.4 → 2.31.5

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.31.4";
+var version = "2.31.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-W5HUNIMM.js";
-import "../chunk-H5QIDJHP.js";
+} from "../chunk-45XUM7UR.js";
+import "../chunk-VCKSLDEL.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.31.4";
+var version = "2.31.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-C3M26NRD.js";
-import "../chunk-W5HUNIMM.js";
-import "../chunk-H5QIDJHP.js";
+} from "../chunk-NPIJWM72.js";
+import "../chunk-45XUM7UR.js";
+import "../chunk-VCKSLDEL.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-W5HUNIMM.js → chunk-45XUM7UR.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-H5QIDJHP.js";
+} from "./chunk-VCKSLDEL.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-C3M26NRD.js → chunk-NPIJWM72.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-W5HUNIMM.js";
+} from "./chunk-45XUM7UR.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-H5QIDJHP.js → chunk-VCKSLDEL.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.31.4";
+var version = "2.31.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.31.4";
+var version = "2.31.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-H5QIDJHP.js";
+} from "./chunk-VCKSLDEL.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.31.4";
+var version = "2.31.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,15 +6,15 @@ import {
 } from "./chunk-UKJ7F5WR.js";
 import {
   log_build_default
-} from "./chunk-C3M26NRD.js";
-import "./chunk-W5HUNIMM.js";
+} from "./chunk-NPIJWM72.js";
+import "./chunk-45XUM7UR.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-7SI5EVOX.js";
 import {
   VERSION
-} from "./chunk-H5QIDJHP.js";
+} from "./chunk-VCKSLDEL.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogProEnabled

package/eventcatalog/src/components/SideNav/CustomDocsNav.astro

@@ -6,4 +6,4 @@ const currentPath = Astro.url.pathname;
 const sidebarItems = await getNavigationItems();
 ---
 
-<CustomDocsNavWrapper client:load sidebarItems={sidebarItems} currentPath={currentPath} />
+<CustomDocsNavWrapper client:only sidebarItems={sidebarItems} currentPath={currentPath} />

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro

@@ -0,0 +1,9 @@
+---
+import { getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
+import CustomDocsNavWrapper from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNavWrapper';
+
+const currentPath = Astro.url.pathname;
+const sidebarItems = await getNavigationItems();
+---
+
+<CustomDocsNavWrapper client:only sidebarItems={sidebarItems} currentPath={currentPath} />

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/components/NestedItem.tsx

@@ -27,7 +27,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
       <div className="py-1">
         <div className="flex items-center">
           <button
-            className="p-1 hover:bg-gray-100 rounded-md"
+            className="p-1 hover:bg-gray-100 rounded-md flex-shrink-0"
             onClick={(e) => {
               e.stopPropagation();
               toggleGroupCollapse(`nested-${itemId}`);
@@ -35,29 +35,34 @@ const NestedItem: React.FC<NestedItemProps> = ({
           >
             <div className={`transition-transform duration-150 ${collapsedGroups[`nested-${itemId}`] ? '' : 'rotate-180'}`}>
               <svg
-                className="h-3 w-3 text-gray-500"
                 xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
                 fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth="1.5"
                 stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
+                aria-hidden="true"
+                data-slot="icon"
+                className="h-3 w-3 text-gray-500"
               >
-                <polyline points="6 9 12 15 18 9" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
               </svg>
             </div>
           </button>
           <button
-            className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
+            className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50 min-w-0 flex-1"
             onClick={(e) => {
               e.stopPropagation();
               toggleGroupCollapse(`nested-${itemId}`);
             }}
           >
             <span className="truncate">{item.label}</span>
+            {item.badge && item?.badge?.text && (
+              <span
+                className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+              >
+                {item.badge.text}
+              </span>
+            )}
           </button>
         </div>
 
@@ -67,92 +72,17 @@ const NestedItem: React.FC<NestedItemProps> = ({
           }`}
         >
           <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
-            {item.items.map((nestedItem: SidebarItem, nestedIndex: number) => {
-              if (nestedItem.items && nestedItem.items.length > 0) {
-                // Recursively render deeper nested items
-                const nestedItemId = `${itemId}-${nestedIndex}`;
-                return (
-                  <div className="py-1" key={`nested-${nestedItemId}`}>
-                    <div className="flex items-center">
-                      <button
-                        className="p-1 hover:bg-gray-100 rounded-md"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleGroupCollapse(`nested-${nestedItemId}`);
-                        }}
-                      >
-                        <div
-                          className={`transition-transform duration-150 ${collapsedGroups[`nested-${nestedItemId}`] ? '' : 'rotate-180'}`}
-                        >
-                          <svg
-                            className="h-3 w-3 text-gray-500"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          >
-                            <polyline points="6 9 12 15 18 9" />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleGroupCollapse(`nested-${nestedItemId}`);
-                        }}
-                      >
-                        <span className="truncate">{nestedItem.label}</span>
-                      </button>
-                    </div>
-
-                    <div
-                      className={`overflow-hidden transition-[height] duration-150 ease-out ${
-                        collapsedGroups[`nested-${nestedItemId}`] ? 'h-0' : 'h-auto'
-                      }`}
-                    >
-                      <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
-                        {nestedItem.items.map((deepNestedItem: SidebarItem, deepIndex: number) => {
-                          const deepNestedItemPath = deepNestedItem.slug ? buildUrl(`/docs/custom/${deepNestedItem.slug}`) : '#';
-                          const isDeepActive =
-                            currentPath === deepNestedItemPath || currentPath.endsWith(`/${deepNestedItem.slug}`);
-
-                          return (
-                            <a
-                              key={`deep-${nestedItemId}-${deepIndex}`}
-                              href={deepNestedItemPath}
-                              className={`flex items-center px-2 py-1.5 text-xs ${isDeepActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
-                              data-active={isDeepActive}
-                            >
-                              <span className="truncate">{deepNestedItem.label}</span>
-                            </a>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </div>
-                );
-              }
-
-              const nestedItemPath = nestedItem.slug ? buildUrl(`/docs/custom/${nestedItem.slug}`) : '#';
-              const isActive = currentPath === nestedItemPath || currentPath.endsWith(`/${nestedItem.slug}`);
-
-              return (
-                <a
-                  key={`nested-link-${itemId}-${nestedIndex}`}
-                  href={nestedItemPath}
-                  className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
-                  data-active={isActive}
-                >
-                  <span className="truncate">{nestedItem.label}</span>
-                </a>
-              );
-            })}
+            {item.items.map((nestedItem: SidebarItem, nestedIndex: number) => (
+              <NestedItem
+                key={`nested-${itemId}-${nestedIndex}`}
+                item={nestedItem}
+                currentPath={currentPath}
+                parentId={itemId}
+                itemIndex={nestedIndex}
+                collapsedGroups={collapsedGroups}
+                toggleGroupCollapse={toggleGroupCollapse}
+              />
+            ))}
           </div>
         </div>
       </div>

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/index.tsx

@@ -7,7 +7,7 @@ import NoResultsFound from './components/NoResultsFound';
 const STORAGE_KEY = 'EventCatalog:customDocsSidebarCollapsedGroups';
 const DEBOUNCE_DELAY = 300; // 300ms debounce delay
 
-const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath }) => {
+const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
   const navRef = useRef<HTMLElement>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
@@ -21,6 +21,8 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath
     return {};
   });
 
+  const currentPath = window.location.pathname;
+
   // Set up debounced search
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -128,29 +130,32 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath
 
   const hasNoResults = debouncedSearchTerm && filteredSidebarItems.length === 0;
 
+  console.log('filteredSidebarItems', filteredSidebarItems);
+  console.log('currentPath', currentPath);
+
   return (
-    <nav ref={navRef} className="h-full text-gray-800 pt-2">
-      <div className="mb-2 px-4">
+    <nav ref={navRef} className="h-full text-gray-800 pt-4 overflow-y-auto">
+      <div className="mb-2 px-3 bg-white z-10">
         <input
           type="text"
           value={searchTerm}
           onChange={handleSearchChange}
           placeholder="Quick search..."
-          className="w-full p-2 text-sm rounded-md border border-gray-200 h-[30px]"
+          className="w-full p-2 px-2 text-sm rounded-md border border-gray-200 h-[30px]"
         />
       </div>
 
-      <div className="space-y-2 divide-y divide-gray-100/40">
+      <div className="space-y-2 divide-y divide-gray-100/40 pb-4">
         {hasNoResults ? (
           <NoResultsFound searchTerm={debouncedSearchTerm} />
         ) : (
           filteredSidebarItems.map((section: SidebarSection, index: number) => (
-            <div className="pt-2 pb-2 px-4" key={`section-${index}`}>
+            <div className="pt-2 pb-2 px-3" key={`section-${index}`}>
               <div className="space-y-0" data-section={`section-${index}`}>
                 {section.items ? (
                   <div className="flex items-center">
                     <button
-                      className="p-1 hover:bg-gray-100 rounded-md"
+                      className="p-1 hover:bg-gray-100 rounded-md flex-shrink-0"
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleGroupCollapse(`section-${index}`);
@@ -160,23 +165,21 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath
                         className={`transition-transform duration-150 ${collapsedGroups[`section-${index}`] ? '' : 'rotate-180'}`}
                       >
                         <svg
-                          className="h-3 w-3 text-gray-500"
                           xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
                           fill="none"
+                          viewBox="0 0 24 24"
+                          strokeWidth="1.5"
                           stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
+                          aria-hidden="true"
+                          data-slot="icon"
+                          className="h-3 w-3 text-gray-500"
                         >
-                          <polyline points="6 9 12 15 18 9" />
+                          <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
                         </svg>
                       </div>
                     </button>
                     <button
-                      className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-purple-50"
+                      className="flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-purple-50 min-w-0 flex-1"
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleGroupCollapse(`section-${index}`);

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/types.ts

@@ -15,6 +15,7 @@ export interface SidebarSection {
   slug?: string;
   autogenerated?: {
     directory: string;
+    collapsed?: boolean;
   };
   badge?: {
     text: string;

package/eventcatalog/src/enterprise/custom-documentation/pages/{index.astro → docs/custom/index.astro}

@@ -1,14 +1,17 @@
 ---
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { render } from 'astro:content';
-import { buildUrl } from '@utils/url-builder';
 import config from '@config';
 import { AlignLeftIcon } from 'lucide-react';
+
 import mdxComponents from '@components/MDX/components';
 import OwnersList from '@components/Lists/OwnersList';
+
 import { getOwner } from '@utils/collections/owners';
-import CustomDocsNav from '@components/SideNav/CustomDocsNav.astro';
-import { getAdjacentPages } from '../utils/custom-docs';
+import { buildUrl } from '@utils/url-builder';
+
+import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
+import { getAdjacentPages } from '@enterprise/custom-documentation/utils/custom-docs';
 
 const props = Astro.props;
 const doc = props.data;
@@ -72,14 +75,16 @@ const badges = doc?.badges || [];
 ---
 
 <VerticalSideBarLayout title={doc.title || 'Documentation'}>
-  <div class="flex w-full">
+  <div class="flex w-full" data-pagefind-body data-pagefind-meta={`title:${doc.title}`}>
     <!-- Left Sidebar Navigation -->
     <aside class="sidebar-transition overflow-y-auto bg-white border-r border-gray-100 w-80 fixed top-16 bottom-0 z-10">
       <CustomDocsNav />
     </aside>
 
     <!-- Main Content Area - Independent scrolling -->
-    <main class="sidebar-transition w-full max-h-content ml-[22em] 2xl:ml-[24em] mr-80 lg:mr-[20em] max-w-5xl mx-auto">
+    <main
+      class="sidebar-transition w-full max-h-content ml-[22em] md:ml-[21em] lg:mr-[21em] 2xl:mr-[26em] 2xl:ml-[22em] mr-80 max-w-5xl mx-auto"
+    >
       <div class="max-w-7xl mx-auto px-6 py-10">
         <div class="border-b border-gray-200 flex justify-between items-start md:pb-6">
           <div>

package/eventcatalog/src/enterprise/custom-documentation/utils/custom-docs.ts

@@ -20,10 +20,11 @@ type SidebarItem = {
 
 type SideBarConfigurationItem = {
   label: string;
-  items?: SidebarItem[];
+  items?: SideBarConfigurationItem[];
   slug?: string;
   autogenerated?: {
     directory: string;
+    collapsed?: boolean;
   };
   badge?: Badge;
   collapsed?: boolean;
@@ -78,6 +79,8 @@ const processAutoGeneratedDirectory = async (
 
   return {
     label,
+    badge,
+    collapsed,
     items: filteredEntries.map((entry) => ({
       label: entry?.data?.title,
       slug: entry?.data?.slug || entry?.id.replace(DOCS_DIR, ''),
@@ -98,13 +101,13 @@ const processSidebarItems = async (items: SideBarConfigurationItem[]): Promise<S
         item.autogenerated.directory,
         item.label,
         item.badge,
-        item.collapsed
+        item.autogenerated.collapsed !== undefined ? item.autogenerated.collapsed : item.collapsed
       );
       processedItems.push(processedItem);
     }
     // If item has nested items, process them recursively
     else if (item.items && item.items.length > 0) {
-      const processedNestedItems = await processSidebarItems(item.items as SideBarConfigurationItem[]);
+      const processedNestedItems = await processSidebarItems(item.items);
       processedItems.push({
         label: item.label,
         slug: item.slug,

package/eventcatalog/src/pages/docs/custom/[...path]/index.astro

@@ -1,6 +1,7 @@
 ---
-import CustomDocumentationPage from '@enterprise/custom-documentation/pages/index.astro';
+import CustomDocumentationPage from '@enterprise/custom-documentation/pages/docs/custom/index.astro';
 import { getCollection } from 'astro:content';
+import { buildUrl } from '@utils/url-builder';
 import type { GetStaticPaths } from 'astro';
 import { isEventCatalogProEnabled } from '@utils/feature';
 import path from 'node:path';
@@ -21,9 +22,8 @@ export const getStaticPaths = (async () => {
 
 const props = Astro.props;
 
-// Redirect
-if (!directoryExists || !isEventCatalogProEnabled()) {
-  Astro.redirect('/docs/custom');
+if (!isEventCatalogProEnabled()) {
+  return Astro.redirect('/docs/custom');
 }
 ---
 

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.31.4",
+  "version": "2.31.5",
   "publishConfig": {
     "access": "public"
   },

package/eventcatalog/src/components/SideNav/CustomDocsNav/CustomDocsNavWrapper.tsx

@@ -1,11 +0,0 @@
-import CustomDocsNav from './';
-import type { SidebarSection } from './types';
-
-interface CustomDocsNavWrapperProps {
-  sidebarItems: SidebarSection[];
-  currentPath: string;
-}
-
-export default function CustomDocsNavWrapper(props: CustomDocsNavWrapperProps) {
-  return <CustomDocsNav {...props} />;
-}

package/eventcatalog/src/components/SideNav/CustomDocsNav/components/NestedItem.tsx

@@ -1,183 +0,0 @@
-import React from 'react';
-import { buildUrl } from '@utils/url-builder';
-import type { SidebarItem } from '../types';
-
-interface NestedItemProps {
-  item: SidebarItem;
-  currentPath: string;
-  parentId: string;
-  itemIndex: number;
-  collapsedGroups: { [key: string]: boolean };
-  toggleGroupCollapse: (group: string) => void;
-}
-
-const NestedItem: React.FC<NestedItemProps> = ({
-  item,
-  currentPath,
-  parentId,
-  itemIndex,
-  collapsedGroups,
-  toggleGroupCollapse,
-}) => {
-  const hasNestedItems = item.items && item.items.length > 0;
-  const itemId = `${parentId}-${itemIndex}`;
-
-  if (hasNestedItems && item.items) {
-    return (
-      <div className="py-1">
-        <div className="flex items-center">
-          <button
-            className="p-1 hover:bg-gray-100 rounded-md"
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleGroupCollapse(`nested-${itemId}`);
-            }}
-          >
-            <div className={`transition-transform duration-150 ${collapsedGroups[`nested-${itemId}`] ? '' : 'rotate-180'}`}>
-              <svg
-                className="h-3 w-3 text-gray-500"
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <polyline points="6 9 12 15 18 9" />
-              </svg>
-            </div>
-          </button>
-          <button
-            className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleGroupCollapse(`nested-${itemId}`);
-            }}
-          >
-            <span className="truncate">{item.label}</span>
-          </button>
-        </div>
-
-        <div
-          className={`overflow-hidden transition-[height] duration-150 ease-out ${
-            collapsedGroups[`nested-${itemId}`] ? 'h-0' : 'h-auto'
-          }`}
-        >
-          <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
-            {item.items.map((nestedItem: SidebarItem, nestedIndex: number) => {
-              if (nestedItem.items && nestedItem.items.length > 0) {
-                // Recursively render deeper nested items
-                const nestedItemId = `${itemId}-${nestedIndex}`;
-                return (
-                  <div className="py-1" key={`nested-${nestedItemId}`}>
-                    <div className="flex items-center">
-                      <button
-                        className="p-1 hover:bg-gray-100 rounded-md"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleGroupCollapse(`nested-${nestedItemId}`);
-                        }}
-                      >
-                        <div
-                          className={`transition-transform duration-150 ${collapsedGroups[`nested-${nestedItemId}`] ? '' : 'rotate-180'}`}
-                        >
-                          <svg
-                            className="h-3 w-3 text-gray-500"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          >
-                            <polyline points="6 9 12 15 18 9" />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleGroupCollapse(`nested-${nestedItemId}`);
-                        }}
-                      >
-                        <span className="truncate">{nestedItem.label}</span>
-                      </button>
-                    </div>
-
-                    <div
-                      className={`overflow-hidden transition-[height] duration-150 ease-out ${
-                        collapsedGroups[`nested-${nestedItemId}`] ? 'h-0' : 'h-auto'
-                      }`}
-                    >
-                      <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
-                        {nestedItem.items.map((deepNestedItem: SidebarItem, deepIndex: number) => {
-                          const deepNestedItemPath = deepNestedItem.slug ? buildUrl(`/docs/custom/${deepNestedItem.slug}`) : '#';
-                          const isDeepActive =
-                            currentPath === deepNestedItemPath || currentPath.endsWith(`/${deepNestedItem.slug}`);
-
-                          return (
-                            <a
-                              key={`deep-${nestedItemId}-${deepIndex}`}
-                              href={deepNestedItemPath}
-                              className={`flex items-center px-2 py-1.5 text-xs ${isDeepActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
-                              data-active={isDeepActive}
-                            >
-                              <span className="truncate">{deepNestedItem.label}</span>
-                            </a>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </div>
-                );
-              }
-
-              const nestedItemPath = nestedItem.slug ? buildUrl(`/docs/custom/${nestedItem.slug}`) : '#';
-              const isActive = currentPath === nestedItemPath || currentPath.endsWith(`/${nestedItem.slug}`);
-
-              return (
-                <a
-                  key={`nested-link-${itemId}-${nestedIndex}`}
-                  href={nestedItemPath}
-                  className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
-                  data-active={isActive}
-                >
-                  <span className="truncate">{nestedItem.label}</span>
-                </a>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const itemPath = item.slug ? buildUrl(`/docs/custom/${item.slug}`) : '#';
-  const isActive = currentPath === itemPath || currentPath.endsWith(`/${item.slug}`);
-
-  return (
-    <a
-      href={itemPath}
-      className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
-      data-active={isActive}
-    >
-      <span className="truncate">{item.label}</span>
-      {item.badge && item?.badge?.text && (
-        <span
-          className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
-        >
-          {item.badge.text}
-        </span>
-      )}
-    </a>
-  );
-};
-
-export default React.memo(NestedItem);

package/eventcatalog/src/components/SideNav/CustomDocsNav/components/NoResultsFound.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-interface NoResultsFoundProps {
-  searchTerm: string;
-}
-
-const NoResultsFound: React.FC<NoResultsFoundProps> = ({ searchTerm }) => (
-  <div className="px-4 py-6 text-center">
-    <div className="text-gray-400 text-sm mb-2">No results found for "{searchTerm}"</div>
-    <div className="text-gray-400 text-xs">
-      Try:
-      <ul className="mt-2 space-y-1 text-left list-disc pl-4">
-        <li>Checking for typos</li>
-        <li>Using fewer keywords</li>
-        <li>Using more general terms</li>
-      </ul>
-    </div>
-  </div>
-);
-
-export default React.memo(NoResultsFound);

package/eventcatalog/src/components/SideNav/CustomDocsNav/index.tsx

@@ -1,250 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { buildUrl } from '@utils/url-builder';
-import type { CustomDocsNavProps, SidebarSection, SidebarItem } from './types';
-import NestedItem from './components/NestedItem';
-import NoResultsFound from './components/NoResultsFound';
-
-const STORAGE_KEY = 'EventCatalog:customDocsSidebarCollapsedGroups';
-const DEBOUNCE_DELAY = 300; // 300ms debounce delay
-
-const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath }) => {
-  const navRef = useRef<HTMLElement>(null);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
-    if (typeof window !== 'undefined') {
-      const saved = window.localStorage.getItem(STORAGE_KEY);
-      setIsInitialized(true);
-      return saved ? JSON.parse(saved) : {};
-    }
-    return {};
-  });
-
-  // Set up debounced search
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedSearchTerm(searchTerm.toLowerCase());
-    }, DEBOUNCE_DELAY);
-
-    return () => clearTimeout(timer);
-  }, [searchTerm]);
-
-  // Filter sidebar items based on search term
-  const filteredSidebarItems = useMemo(() => {
-    if (!debouncedSearchTerm) return sidebarItems;
-
-    const matchesSearchTerm = (text: string) => text.toLowerCase().includes(debouncedSearchTerm);
-
-    // Helper function to check if an item or any of its nested items match the search term
-    const itemContainsSearchTerm = (item: SidebarItem): boolean => {
-      if (matchesSearchTerm(item.label)) return true;
-
-      if (item.items && item.items.length > 0) {
-        return item.items.some(itemContainsSearchTerm);
-      }
-
-      return false;
-    };
-
-    return sidebarItems
-      .map((section) => {
-        if (!section.items) {
-          return matchesSearchTerm(section.label) ? section : null;
-        }
-
-        const filteredItems = section.items.filter(itemContainsSearchTerm);
-
-        if (filteredItems.length > 0 || matchesSearchTerm(section.label)) {
-          return {
-            ...section,
-            items: filteredItems,
-          };
-        }
-
-        return null;
-      })
-      .filter(Boolean) as SidebarSection[];
-  }, [sidebarItems, debouncedSearchTerm]);
-
-  // Auto-expand groups when searching
-  useEffect(() => {
-    if (debouncedSearchTerm) {
-      // Expand all groups when searching
-      const newCollapsedState = { ...collapsedGroups };
-      Object.keys(newCollapsedState).forEach((key) => {
-        newCollapsedState[key] = false;
-      });
-      setCollapsedGroups(newCollapsedState);
-    }
-  }, [debouncedSearchTerm]);
-
-  // Store collapsed groups in local storage
-  useEffect(() => {
-    if (typeof window !== 'undefined' && isInitialized) {
-      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
-    }
-  }, [collapsedGroups, isInitialized]);
-
-  // Initialize collapsed state from section config
-  useEffect(() => {
-    if (isInitialized && sidebarItems && sidebarItems.length > 0) {
-      const initialState = { ...collapsedGroups };
-
-      sidebarItems.forEach((section, index) => {
-        const sectionKey = `section-${index}`;
-        if (section.collapsed !== undefined && initialState[sectionKey] === undefined) {
-          initialState[sectionKey] = section.collapsed;
-        }
-      });
-
-      setCollapsedGroups(initialState);
-    }
-  }, [sidebarItems, isInitialized]);
-
-  // If we find a data-active element, scroll to it on mount
-  useEffect(() => {
-    const activeElement = document.querySelector('[data-active="true"]');
-    if (activeElement) {
-      // Add y offset to the scroll position
-      setTimeout(() => {
-        activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }, 300);
-    }
-  }, []);
-
-  const toggleGroupCollapse = useCallback((group: string) => {
-    setCollapsedGroups((prev) => ({
-      ...prev,
-      [group]: !prev[group],
-    }));
-  }, []);
-
-  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
-  }, []);
-
-  if (!isInitialized) return null;
-
-  const hasNoResults = debouncedSearchTerm && filteredSidebarItems.length === 0;
-
-  return (
-    <nav ref={navRef} className="h-full text-gray-800 pt-2">
-      <div className="mb-2 px-4">
-        <input
-          type="text"
-          value={searchTerm}
-          onChange={handleSearchChange}
-          placeholder="Quick search..."
-          className="w-full p-2 text-sm rounded-md border border-gray-200 h-[30px]"
-        />
-      </div>
-
-      <div className="space-y-2 divide-y divide-gray-100/40">
-        {hasNoResults ? (
-          <NoResultsFound searchTerm={debouncedSearchTerm} />
-        ) : (
-          filteredSidebarItems.map((section: SidebarSection, index: number) => (
-            <div className="pt-2 pb-2 px-4" key={`section-${index}`}>
-              <div className="space-y-0" data-section={`section-${index}`}>
-                {section.items ? (
-                  <div className="flex items-center">
-                    <button
-                      className="p-1 hover:bg-gray-100 rounded-md"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        toggleGroupCollapse(`section-${index}`);
-                      }}
-                    >
-                      <div
-                        className={`transition-transform duration-150 ${collapsedGroups[`section-${index}`] ? '' : 'rotate-180'}`}
-                      >
-                        <svg
-                          className="h-3 w-3 text-gray-500"
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        >
-                          <polyline points="6 9 12 15 18 9" />
-                        </svg>
-                      </div>
-                    </button>
-                    <button
-                      className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-purple-50"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        toggleGroupCollapse(`section-${index}`);
-                      }}
-                    >
-                      <span className="truncate">{section.label}</span>
-                      {section.badge && section?.badge?.text && (
-                        <span
-                          className={`text-${section.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${section.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
-                        >
-                          {section.badge.text}
-                        </span>
-                      )}
-                    </button>
-                  </div>
-                ) : (
-                  <div className="flex items-center">
-                    <span className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md">
-                      <span className="truncate">{section.label}</span>
-                      <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded uppercase">
-                        Section
-                      </span>
-                    </span>
-                  </div>
-                )}
-
-                {section.items && (
-                  <div
-                    className={`overflow-hidden transition-[height] duration-150 ease-out ${
-                      collapsedGroups[`section-${index}`] ? 'h-0' : 'h-auto'
-                    }`}
-                  >
-                    <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
-                      {section.items.map((item: SidebarItem, itemIndex: number) => (
-                        <NestedItem
-                          key={`item-${index}-${itemIndex}`}
-                          item={item}
-                          currentPath={currentPath}
-                          parentId={`${index}`}
-                          itemIndex={itemIndex}
-                          collapsedGroups={collapsedGroups}
-                          toggleGroupCollapse={toggleGroupCollapse}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {section.slug && !section.items && (
-                  <a
-                    href={buildUrl(`/docs/custom/${section.slug}`)}
-                    className={`flex items-center px-2 py-1.5 text-xs ${
-                      currentPath.endsWith(`/${section.slug}`)
-                        ? 'bg-purple-100 text-purple-900 font-medium'
-                        : 'text-gray-600 hover:bg-purple-100'
-                    } rounded-md ml-6`}
-                    data-active={currentPath.endsWith(`/${section.slug}`)}
-                  >
-                    <span className="truncate">{section.label}</span>
-                  </a>
-                )}
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-    </nav>
-  );
-};
-
-export default React.memo(CustomDocsNav);

package/eventcatalog/src/components/SideNav/CustomDocsNav/types.ts

@@ -1,29 +0,0 @@
-export interface SidebarItem {
-  label: string;
-  slug?: string;
-  items?: SidebarItem[];
-  badge?: {
-    text: string;
-    color: string;
-  };
-  collapsed?: boolean;
-}
-
-export interface SidebarSection {
-  label: string;
-  items?: SidebarItem[];
-  slug?: string;
-  autogenerated?: {
-    directory: string;
-  };
-  badge?: {
-    text: string;
-    color: string;
-  };
-  collapsed?: boolean;
-}
-
-export interface CustomDocsNavProps {
-  sidebarItems: SidebarSection[];
-  currentPath: string;
-}