chore(core): added icons to spec files in sidebar (event-catalog#1909)

* chore(core): added icons to spec files in sidebar

* Create beige-nails-wonder.md

* chore(core): added icons to spec files in sidebar

Author: boyney123

.changeset/beige-nails-wonder.md

@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+chore(core): added icons to spec files in sidebar

eventcatalog/public/icons/asyncapi-black.svg

@@ -896,9 +896,24 @@ describe('getNestedSideBarData', () => {
         const serviceNode = getNavigationConfigurationByKey('service:ShippingService:0.0.1', navigationData);
         const apiContractsSection = getChildNodeByTitle('API & Contracts', serviceNode.pages ?? []);
         expect(apiContractsSection.pages).toEqual([
-          { type: 'item', title: 'OpenAPI (OpenAPI)', href: '/docs/services/ShippingService/0.0.1/spec/openapi' },
-          { type: 'item', title: 'AsyncAPI (AsyncAPI)', href: '/docs/services/ShippingService/0.0.1/asyncapi/asyncapi' },
-          { type: 'item', title: 'GraphQL (GraphQL)', href: '/docs/services/ShippingService/0.0.1/graphql/graphql' },
+          {
+            type: 'item',
+            title: 'OpenAPI',
+            leftIcon: '/icons/openapi-black.svg',
+            href: '/docs/services/ShippingService/0.0.1/spec/openapi',
+          },
+          {
+            type: 'item',
+            title: 'AsyncAPI',
+            leftIcon: '/icons/asyncapi-black.svg',
+            href: '/docs/services/ShippingService/0.0.1/asyncapi/asyncapi',
+          },
+          {
+            type: 'item',
+            title: 'GraphQL',
+            leftIcon: '/icons/graphql-black.svg',
+            href: '/docs/services/ShippingService/0.0.1/graphql/graphql',
+          },
         ]);
       });
     });

eventcatalog/public/icons/graphql-black.svg

@@ -80,21 +80,24 @@ export const buildServiceNode = (service: CollectionEntry<'services'>, owners: a
         pages: [
           ...openAPISpecifications.map((specification) => ({
             type: 'item',
-            title: `${specification.name} (OpenAPI)`,
+            title: `${specification.name}`,
+            leftIcon: '/icons/openapi-black.svg',
             href: buildUrl(
               `/docs/services/${service.data.id}/${service.data.version}/spec/${specification.filenameWithoutExtension}`
             ),
           })),
           ...asyncAPISpecifications.map((specification) => ({
             type: 'item',
-            title: `${specification.name} (AsyncAPI)`,
+            title: `${specification.name}`,
+            leftIcon: '/icons/asyncapi-black.svg',
             href: buildUrl(
               `/docs/services/${service.data.id}/${service.data.version}/asyncapi/${specification.filenameWithoutExtension}`
             ),
           })),
           ...graphQLSpecifications.map((specification) => ({
             type: 'item',
-            title: `${specification.name} (GraphQL)`,
+            title: `${specification.name}`,
+            leftIcon: '/icons/graphql-black.svg',
             href: buildUrl(
               `/docs/services/${service.data.id}/${service.data.version}/graphql/${specification.filenameWithoutExtension}`
             ),

eventcatalog/public/icons/openapi-black.svg

@@ -17,6 +17,7 @@ export type NavNode = {
   type: 'group' | 'item';
   title: string;
   icon?: string; // Lucide icon name
+  leftIcon?: string; // Path to SVG icon shown on the left of the label
   href?: string; // URL (for leaf items)
   external?: boolean; // If true, the item will open in a new tab
   pages?: ChildRef[]; // Can mix keys and inline nodes

eventcatalog/src/components/SideNav/NestedSideBar/__tests__/sidebar-builder.spec.ts

@@ -776,6 +776,7 @@ export default function NestedSideBar() {
               <IconComponent className="w-4 h-4" />
             </span>
           )}
+          {item.leftIcon && <img src={item.leftIcon} alt="" className="w-4 h-4 flex-shrink-0" />}
           <span
             className={cn(
               'text-[13px] truncate',

eventcatalog/src/components/SideNav/NestedSideBar/builders/service.ts

@@ -36,6 +36,7 @@ schemaPath: openapi-v1.yml
 specifications:
   - type: asyncapi
     path: order-service-asyncapi.yaml
+    name: AsyncAPI
   - type: openapi
     path: openapi-v1.yml
     name: v1 API