diff --git a/packages/ui/src/layout/Navigation.test.tsx b/packages/ui/src/layout/Navigation.test.tsx
new file mode 100644
index 000000000..56f32e70b
--- /dev/null
+++ b/packages/ui/src/layout/Navigation.test.tsx
@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { EntitiesContextResult } from '../hooks/entities';
+import { SourceSchemaType } from '../models/camel';
+import { EntitiesContext } from '../providers';
+import { Navigation } from './Navigation';
+
+describe('Navigation Component', () => {
+ it.each([
+ SourceSchemaType.Route,
+ SourceSchemaType.Kamelet,
+ SourceSchemaType.Pipe,
+ SourceSchemaType.KameletBinding,
+ SourceSchemaType.Integration,
+ ])('navigation sidebar for: %s', (currentSchemaType) => {
+ const wrapper = render(
+
+
+
+
+ ,
+ );
+
+ expect(wrapper.asFragment()).toMatchSnapshot();
+ });
+});
diff --git a/packages/ui/src/layout/Navigation.tsx b/packages/ui/src/layout/Navigation.tsx
index 6b0f02b4d..e075deedd 100644
--- a/packages/ui/src/layout/Navigation.tsx
+++ b/packages/ui/src/layout/Navigation.tsx
@@ -1,15 +1,47 @@
import { Nav, NavExpandable, NavItem, NavList, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
import clsx from 'clsx';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useContext, useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Links } from '../router/links.models';
import { NavElements } from './navigation.models';
+import { EntitiesContext } from '../providers';
+import { SourceSchemaType } from '../models/camel';
interface INavigationSidebar {
isNavOpen: boolean;
}
export const Navigation: FunctionComponent = (props) => {
const currentLocation = useLocation();
+ const { currentSchemaType } = useContext(EntitiesContext)!;
+
+ const navElements: NavElements = useMemo(
+ () => [
+ {
+ title: 'Visualization',
+ children: [
+ { title: 'Design', to: Links.Home },
+ { title: 'Source Code', to: Links.SourceCode },
+ ],
+ },
+ {
+ title: 'Beans',
+ to: Links.Beans,
+ hidden: () => !NAVIGATION_ELEMENTS.Beans.includes(currentSchemaType),
+ },
+ {
+ title: 'Metadata',
+ to: Links.Metadata,
+ hidden: () => !NAVIGATION_ELEMENTS.Metadata.includes(currentSchemaType),
+ },
+ {
+ title: 'Pipe ErrorHandler',
+ to: Links.PipeErrorHandler,
+ hidden: () => !NAVIGATION_ELEMENTS.PipeErrorHandler.includes(currentSchemaType),
+ },
+ { title: 'Catalog', to: Links.Catalog },
+ ],
+ [currentSchemaType],
+ );
return (