@eventcatalog/core 2.31.4 → 2.32.0

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/eventcatalog/src/utils/collections/icons.ts

@@ -43,3 +43,32 @@ export const getIconForCollection = (collection: string) => {
       return ServerIcon;
   }
 };
+
+export const getColorAndIconForCollection = (collection: string) => {
+  const icon = getIconForCollection(collection);
+
+  switch (collection) {
+    case 'events':
+      return { color: 'orange', Icon: icon };
+    case 'commands':
+      return { color: 'blue', Icon: icon };
+    case 'queries':
+      return { color: 'green', Icon: icon };
+    case 'flows':
+      return { color: 'teal', Icon: icon };
+    case 'teams':
+      return { color: 'red', Icon: icon };
+    case 'users':
+      return { color: 'gray', Icon: icon };
+    case 'channels':
+      return { color: 'purple', Icon: icon };
+    case 'ubiquitousLanguages':
+      return { color: 'green', Icon: icon };
+    case 'domains':
+      return { color: 'yellow', Icon: icon };
+    case 'services':
+      return { color: 'pink', Icon: icon };
+    default:
+      return { color: 'gray', Icon: icon };
+  }
+};

package/eventcatalog/src/utils/collections/services.ts

@@ -21,10 +21,10 @@ let cachedServices: Record<string, Service[]> = {
 export const getServices = async ({ getAllVersions = true }: Props = {}): Promise<Service[]> => {
   const cacheKey = getAllVersions ? 'allVersions' : 'currentVersions';
 
-  // // Check if we have cached domains for this specific getAllVersions value
-  // if (cachedServices[cacheKey].length > 0) {
-  //   return cachedServices[cacheKey];
-  // }
+  // Check if we have cached domains for this specific getAllVersions value
+  if (cachedServices[cacheKey].length > 0) {
+    return cachedServices[cacheKey];
+  }
 
   // Get services that are not versioned
   const services = await getCollection('services', (service) => {

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.31.4",
+  "version": "2.32.0",
   "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);