@eventcatalog/core 2.26.1 → 2.28.0

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

@@ -0,0 +1,390 @@
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
+import CollapsibleGroup from './components/CollapsibleGroup';
+import MessageList from './components/MessageList';
+import type { MessageItem, ServiceItem, ListViewSideBarProps } from './types';
+const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
+const DEBOUNCE_DELAY = 300; // 300ms debounce delay
+
+export const getMessageColorByCollection = (collection: string) => {
+  if (collection === 'commands') return 'bg-blue-50 text-blue-600';
+  if (collection === 'queries') return 'bg-green-50 text-green-600';
+  if (collection === 'events') return 'bg-orange-50 text-orange-600';
+  return 'text-gray-600';
+};
+
+export const getMessageCollectionName = (collection: string) => {
+  if (collection === 'commands') return 'Command';
+  if (collection === 'queries') return 'Query';
+  if (collection === 'events') return 'Event';
+  return collection.slice(0, collection.length - 1).toUpperCase();
+};
+
+const NoResultsFound = React.memo(({ searchTerm }: { searchTerm: string }) => (
+  <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>
+));
+
+const ServiceItem = React.memo(
+  ({
+    item,
+    decodedCurrentPath,
+    collapsedGroups,
+    toggleGroupCollapse,
+  }: {
+    item: ServiceItem;
+    decodedCurrentPath: string;
+    collapsedGroups: { [key: string]: boolean };
+    toggleGroupCollapse: (group: string) => void;
+  }) => (
+    <CollapsibleGroup
+      isCollapsed={collapsedGroups[item.href]}
+      onToggle={() => toggleGroupCollapse(item.href)}
+      title={
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleGroupCollapse(item.href);
+          }}
+          className="flex justify-between items-center pl-2 w-full text-xs"
+        >
+          <span className="truncate text-xs font-bold">{item.label}</span>
+          <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded">SERVICE</span>
+        </button>
+      }
+    >
+      <div className="space-y-0 border-gray-200/80 border-l pl-3 ml-[9px] mt-1">
+        <a
+          href={`${item.href}`}
+          className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+            decodedCurrentPath === item.href ? 'bg-purple-100' : 'hover:bg-purple-100'
+          }`}
+        >
+          <span className="truncate">Overview</span>
+        </a>
+        <a
+          href={buildUrlWithParams('/architecture/docs/messages', {
+            serviceName: item.name,
+            serviceId: item.id,
+          })}
+          className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+            window.location.href.includes(`serviceId=${item.id}`) ? 'bg-purple-100' : 'hover:bg-purple-100'
+          }`}
+        >
+          <span className="truncate">Architecture</span>
+        </a>
+
+        <CollapsibleGroup
+          isCollapsed={collapsedGroups[`${item.href}-receives`]}
+          onToggle={() => toggleGroupCollapse(`${item.href}-receives`)}
+          title={
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleGroupCollapse(`${item.href}-receives`);
+              }}
+              className="truncate underline ml-2 text-xs mb-1 py-1"
+            >
+              Receives messages ({item.receives.length})
+            </button>
+          }
+        >
+          <MessageList messages={item.receives} decodedCurrentPath={decodedCurrentPath} />
+        </CollapsibleGroup>
+
+        <CollapsibleGroup
+          isCollapsed={collapsedGroups[`${item.href}-sends`]}
+          onToggle={() => toggleGroupCollapse(`${item.href}-sends`)}
+          title={
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleGroupCollapse(`${item.href}-sends`);
+              }}
+              className="truncate underline ml-2 text-xs mb-1 py-1"
+            >
+              Sends messages ({item.sends.length})
+            </button>
+          }
+        >
+          <MessageList messages={item.sends} decodedCurrentPath={decodedCurrentPath} />
+        </CollapsibleGroup>
+      </div>
+    </CollapsibleGroup>
+  )
+);
+
+const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPath }) => {
+  const navRef = useRef<HTMLElement>(null);
+  const [data] = useState(resources);
+  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 {};
+  });
+
+  const decodedCurrentPath = decodeURIComponent(currentPath);
+
+  // Debounce search term updates
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm.toLowerCase());
+    }, DEBOUNCE_DELAY);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Filter data based on search term
+  const filteredData = useMemo(() => {
+    if (!debouncedSearchTerm) return data;
+
+    const filterItem = (item: { label: string }) => {
+      return item.label.toLowerCase().includes(debouncedSearchTerm);
+    };
+
+    const filterMessages = (messages: MessageItem[]) => {
+      return messages.filter((message) => message.data.name.toLowerCase().includes(debouncedSearchTerm));
+    };
+
+    return {
+      domains: data.domains?.filter(filterItem) || [],
+      services:
+        data.services
+          ?.map((service: ServiceItem) => ({
+            ...service,
+            sends: filterMessages(service.sends),
+            receives: filterMessages(service.receives),
+            isVisible:
+              filterItem(service) ||
+              service.sends.some((msg: MessageItem) => msg.data.name.toLowerCase().includes(debouncedSearchTerm)) ||
+              service.receives.some((msg: MessageItem) => msg.data.name.toLowerCase().includes(debouncedSearchTerm)),
+          }))
+          .filter((service: ServiceItem & { isVisible: boolean }) => service.isVisible) || [],
+      flows: data.flows?.filter(filterItem) || [],
+      messagesNotInService:
+        data.messagesNotInService?.filter((msg: MessageItem) => msg.label.toLowerCase().includes(debouncedSearchTerm)) || [],
+    };
+  }, [data, 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') {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
+    }
+  }, [collapsedGroups]);
+
+  // 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
+      activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, []);
+
+  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 &&
+    !filteredData.domains?.length &&
+    !filteredData.services?.length &&
+    !filteredData.flows?.length &&
+    !filteredData.messagesNotInService?.length;
+
+  return (
+    <nav ref={navRef} className="space-y-4 text-gray-800 px-3 py-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 className="space-y-2 divide-y divide-gray-200/80">
+        {hasNoResults ? (
+          <NoResultsFound searchTerm={debouncedSearchTerm} />
+        ) : (
+          <>
+            {/* Domains */}
+            {filteredData['domains'] && (
+              <div>
+                <ul className="space-y-2">
+                  {filteredData['domains'].map((item: any) => (
+                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
+                      <div className="flex items-center">
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleGroupCollapse(item.href);
+                          }}
+                          className="p-1 hover:bg-gray-100 rounded-md"
+                        >
+                          <div className={`transition-transform duration-150 ${collapsedGroups[item.href] ? '' : 'rotate-180'}`}>
+                            <ChevronDownIcon className="h-3 w-3 text-gray-500" />
+                          </div>
+                        </button>
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            toggleGroupCollapse(item.href);
+                          }}
+                          className={`flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
+                            decodedCurrentPath === item.href
+                          }`}
+                        >
+                          <span className="truncate">{item.label}</span>
+                          <span className="text-yellow-600 ml-2 text-[10px] font-medium bg-yellow-50 px-2 py-0.5 rounded">
+                            DOMAIN
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        className={`overflow-hidden transition-[height] duration-150 ease-out ${
+                          collapsedGroups[item.href] ? 'h-0' : 'h-auto'
+                        }`}
+                      >
+                        <div className="space-y-0 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+                          <a
+                            href={`${item.href}`}
+                            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                              decodedCurrentPath === item.href ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                            }`}
+                          >
+                            <span className="truncate">Overview</span>
+                          </a>
+                          <a
+                            href={buildUrlWithParams('/architecture/docs/services', {
+                              serviceIds: item.services.map((service: any) => service.data.id).join(','),
+                              domainId: item.id,
+                              domainName: item.name,
+                            })}
+                            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                              window.location.href.includes(`domainId=${item.id}`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                            }`}
+                          >
+                            <span className="truncate">Architecture</span>
+                          </a>
+                          <a
+                            href={buildUrl(`/docs/domains/${item.id}/language`)}
+                            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                              decodedCurrentPath.includes(`/docs/domains/${item.id}/language`)
+                                ? 'bg-purple-100 '
+                                : 'hover:bg-purple-100'
+                            }`}
+                          >
+                            <span className="truncate">Ubiquitous Language</span>
+                          </a>
+                        </div>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {filteredData['services'] && (
+              <div className="pt-4 pb-2">
+                <ul className="space-y-4">
+                  {filteredData['services'].map((item: any) => (
+                    <ServiceItem
+                      key={item.href}
+                      item={item}
+                      decodedCurrentPath={decodedCurrentPath}
+                      collapsedGroups={collapsedGroups}
+                      toggleGroupCollapse={toggleGroupCollapse}
+                    />
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {filteredData['messagesNotInService'] && (
+              <div className="pt-4 pb-2">
+                <ul className="space-y-4">
+                  {filteredData['messagesNotInService'].map((item: any) => (
+                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
+                      <a
+                        href={item.href}
+                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
+                          decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
+                        }`}
+                      >
+                        <span className="truncate">{item.label}</span>
+                        <span
+                          className={`ml-2 text-[10px] font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByCollection(item.collection)}`}
+                        >
+                          {getMessageCollectionName(item.collection)}
+                        </span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {filteredData['flows'] && (
+              <div className="pt-4 pb-2">
+                <ul className="space-y-4">
+                  {filteredData['flows'].map((item: any) => (
+                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
+                      <a
+                        href={item.href}
+                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
+                          decodedCurrentPath === item.href ? 'bg-cyan-100 text-cyan-900' : 'hover:bg-purple-100'
+                        }`}
+                      >
+                        <span className="truncate">{item.label}</span>
+                        <span className="text-cyan-600 ml-2 text-[10px] font-medium bg-cyan-50 px-2 py-0.5 rounded">FLOW</span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default React.memo(ListViewSideBar);

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

@@ -0,0 +1,48 @@
+export interface MessageItem {
+  href: string;
+  label: string;
+  service: string;
+  id: string;
+  direction: 'sends' | 'receives';
+  type: 'command' | 'query' | 'event';
+  data: {
+    name: string;
+  };
+}
+
+export interface ServiceItem {
+  href: string;
+  label: string;
+  name: string;
+  id: string;
+  sends: MessageItem[];
+  receives: MessageItem[];
+}
+
+interface DomainItem {
+  href: string;
+  label: string;
+  id: string;
+  name: string;
+  services: any[];
+}
+
+interface FlowItem {
+  href: string;
+  label: string;
+}
+
+interface Resources {
+  domains?: DomainItem[];
+  services?: ServiceItem[];
+  flows?: FlowItem[];
+  messagesNotInService?: MessageItem[];
+  commands?: MessageItem[];
+  queries?: MessageItem[];
+  events?: MessageItem[];
+}
+
+export interface ListViewSideBarProps {
+  resources: Resources;
+  currentPath: string;
+}

package/eventcatalog/src/components/SideNav/ListViewSideBar/utils.ts

@@ -0,0 +1,103 @@
+import { isCollectionVisibleInCatalog } from '@eventcatalog';
+import { buildUrl } from '@utils/url-builder';
+import { getChannels } from '@utils/channels';
+import { getDomains } from '@utils/collections/domains';
+import { getFlows } from '@utils/collections/flows';
+import { getServices } from '@utils/collections/services';
+import { getCommands } from '@utils/commands';
+import { getEvents } from '@utils/events';
+import { getQueries } from '@utils/queries';
+
+export async function getResourcesForNavigation({ currentPath }: { currentPath: string }) {
+  const events = await getEvents({ getAllVersions: false });
+  const commands = await getCommands({ getAllVersions: false });
+  const queries = await getQueries({ getAllVersions: false });
+  const services = await getServices({ getAllVersions: false });
+  const domains = await getDomains({ getAllVersions: false });
+  const channels = await getChannels({ getAllVersions: false });
+  const flows = await getFlows({ getAllVersions: false });
+
+  const messages = [...events, ...commands, ...queries];
+
+  // messages that are not in a service (sends or receives)
+  const messagesNotInService = messages.filter(
+    (message) =>
+      !services.some(
+        (service) =>
+          service.data?.sends?.some((send: any) => send.data.id === message.data.id) ||
+          service.data?.receives?.some((receive: any) => receive.data.id === message.data.id)
+      )
+  );
+
+  const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
+
+  // Just the domains for now.
+  const allDataAsSideNav = [...domains, ...services, ...flows, ...channels].reduce((acc, item) => {
+    const title = item.collection;
+    const group = acc[title] || [];
+
+    const servicesCount = item.collection === 'domains' ? item.data.services?.length || 0 : 0;
+    const sends = item.collection === 'services' ? item.data.sends || null : null;
+    const receives = item.collection === 'services' ? item.data.receives || null : null;
+
+    // Add href to the sends and receives
+    const sendsWithHref = sends?.map((send: any) => ({
+      ...send,
+      href: buildUrl(`/${route}/${send.collection}/${send.data.id}/${send.data.version}`),
+    }));
+    const receivesWithHref = receives?.map((receive: any) => ({
+      ...receive,
+      href: buildUrl(`/${route}/${receive.collection}/${receive.data.id}/${receive.data.version}`),
+    }));
+
+    const navigationItem = {
+      label: item.data.name,
+      version: item.data.version,
+      // items: item.collection === 'users' ? [] : item.headings,
+      visible: isCollectionVisibleInCatalog(item.collection),
+      // @ts-ignore
+      href: item.data.version
+        ? // @ts-ignore
+          buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
+        : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
+      collection: item.collection,
+      servicesCount,
+      id: item.data.id,
+      name: item.data.name,
+      services: item.collection === 'domains' ? item.data.services : null,
+      sends: sendsWithHref,
+      receives: receivesWithHref,
+    };
+
+    group.push(navigationItem);
+
+    return {
+      ...acc,
+      [title]: group,
+    };
+  }, {} as any);
+
+  // Add messagesNotInService
+  const messagesNotInServiceAsSideNav = messagesNotInService.map((item) => ({
+    label: item.data.name,
+    version: item.data.version,
+    id: item.data.id,
+    name: item.data.name,
+    href: buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`),
+    collection: item.collection,
+  }));
+
+  const sideNav = {
+    ...(currentPath.includes('visualiser')
+      ? {
+          'bounded context map': [
+            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
+          ],
+        }
+      : {}),
+    ...allDataAsSideNav,
+    messagesNotInService: messagesNotInServiceAsSideNav,
+  };
+
+  return sideNav;
+}

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

@@ -3,29 +3,30 @@ import type { HTMLAttributes } from 'astro/types';
 import config from '@config';
 
 // FlatView
-import CatalogResourcesSideBar from './CatalogResourcesSideBar';
-import { getCatalogResources } from './CatalogResourcesSideBar/getCatalogResources';
+import { getResourcesForNavigation as getListViewResources } from './ListViewSideBar/utils';
 
 // TreeView
 import { SideNavTreeView } from './TreeView';
 import { getTreeView } from './TreeView/getTreeView';
 
+import ListViewSideBar from './ListViewSideBar';
+
 interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
 
 const currentPath = Astro.url.pathname;
 
 let props;
 
-const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'FLAT_VIEW';
+const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'LIST_VIEW';
 
-if (SIDENAV_TYPE === 'FLAT_VIEW') {
-  props = await getCatalogResources({ currentPath });
-} else if (SIDENAV_TYPE === 'TREE_VIEW') {
+if (SIDENAV_TYPE === 'TREE_VIEW') {
   props = getTreeView({ projectDir: process.env.PROJECT_DIR!, currentPath });
+} else if (SIDENAV_TYPE === 'LIST_VIEW') {
+  props = await getListViewResources({ currentPath });
 }
 ---
 
 <div {...Astro.props}>
-  {SIDENAV_TYPE === 'FLAT_VIEW' && <CatalogResourcesSideBar resources={props} currentPath={currentPath} client:load />}
+  {SIDENAV_TYPE === 'LIST_VIEW' && <ListViewSideBar resources={props} currentPath={currentPath} client:only />}
   {SIDENAV_TYPE === 'TREE_VIEW' && <SideNavTreeView client:only transition:persist tree={props} />}
 </div>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -5,10 +5,11 @@ interface Props {
   description?: string;
 }
 
-import { BookOpenText, Workflow, TableProperties, House, BookUser, MessageSquare, BotMessageSquare } from 'lucide-react';
+import { BookOpenText, Workflow, TableProperties, House, BookUser, MessageSquare, BotMessageSquare, Users } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
 import SideNav from '../components/SideNav/SideNav.astro';
+// import '@fontsource/inter';
 
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/collections/domains';
@@ -65,7 +66,7 @@ const navigationItems = [
     label: 'Documentation',
     icon: BookOpenText,
     href: catalogHasDefaultLandingPageForDocs ? buildUrl('/docs') : getDefaultUrl('docs', '/docs'),
-    current: currentPath.includes('/docs'),
+    current: currentPath.includes('/docs') || currentPath.includes('/architecture/docs/'),
     sidebar: true,
   },
   {
@@ -86,12 +87,21 @@ const navigationItems = [
   },
   {
     id: '/directory',
-    label: 'Directory',
-    icon: BookUser,
+    label: 'Users & Teams',
+    icon: Users,
     href: buildUrl('/directory/users'),
     current: currentPath.includes('/directory'),
     sidebar: false,
   },
+  {
+    id: '/architecture',
+    label: 'Architecture',
+    icon: BookUser,
+    href: buildUrl('/architecture/domains'),
+    current: currentPath.includes('/architecture/'),
+    sidebar: false,
+    hidden: true,
+  },
   {
     id: '/chat',
     label: 'AI Assistant',
@@ -139,23 +149,25 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
           <nav class="flex flex-col h-[84vh] justify-between">
             <div class="flex flex-col items-center flex-1 space-y-8">
               {
-                navigationItems.map((item) => {
-                  return (
-                    <a
-                      id={item.id}
-                      data-role="nav-item"
-                      href={item.href}
-                      class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${item.current ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
-                    >
-                      <div class="has-tooltip">
-                        <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
-                          {item.label}
-                        </span>
-                        <item.icon className="h-6 w-6  " />
-                      </div>
-                    </a>
-                  );
-                })
+                navigationItems
+                  .filter((item) => !item.hidden)
+                  .map((item) => {
+                    return (
+                      <a
+                        id={item.id}
+                        data-role="nav-item"
+                        href={item.href}
+                        class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${item.current ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
+                      >
+                        <div class="has-tooltip">
+                          <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
+                            {item.label}
+                          </span>
+                          <item.icon className="h-6 w-6  " />
+                        </div>
+                      </a>
+                    );
+                  })
               }
             </div>
           </nav>
@@ -163,7 +175,7 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
 
         <SideNav
           id="sidebar"
-          class={`sidebar-transition h-content  overflow-y-auto bg-white  border-r border-gray-100 w-60 ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
+          class={`sidebar-transition h-content  overflow-y-auto bg-white  border-r border-gray-100 w-80 ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
         />
       </aside>
       <main