From a9770d825530bf149d2e390af5e06dd416093caa Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Tue, 17 Sep 2024 20:18:59 +0000
Subject: [PATCH] fix(Navigation): Remove items unrelated to current schema

fix: https://github.com/KaotoIO/kaoto/issues/1444
---
 packages/ui/src/layout/Navigation.test.tsx    |  26 +
 packages/ui/src/layout/Navigation.tsx         |  70 +-
 packages/ui/src/layout/Shell.scss             |   5 +
 .../__snapshots__/Navigation.test.tsx.snap    | 796 ++++++++++++++++++
 packages/ui/src/layout/navigation.models.ts   |   4 +-
 5 files changed, 881 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/src/layout/Navigation.test.tsx
 create mode 100644 packages/ui/src/layout/__snapshots__/Navigation.test.tsx.snap

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(
+      <Router>
+        <EntitiesContext.Provider value={{ currentSchemaType } as EntitiesContextResult}>
+          <Navigation isNavOpen />
+        </EntitiesContext.Provider>
+      </Router>,
+    );
+
+    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<INavigationSidebar> = (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 (
     <PageSidebar isSidebarOpen={props.isNavOpen} id="vertical-sidebar">
@@ -22,7 +54,9 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
                   <NavExpandable
                     id={nav.title}
                     key={nav.title}
-                    className={clsx({ 'pf-v5-u-hidden': nav.hidden })}
+                    data-testid={nav.title}
+                    className={clsx({ 'pf-v5-u-hidden': nav.hidden?.() })}
+                    hidden={nav.hidden?.()}
                     title={nav.title}
                     groupId={nav.title}
                     isActive={nav.children.some((child) => child.to === currentLocation.pathname)}
@@ -32,8 +66,10 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
                       <NavItem
                         id={child.title}
                         key={child.title}
+                        data-testid={child.title}
                         itemId={index}
-                        className={clsx({ 'pf-v5-u-hidden': child.hidden })}
+                        className={clsx({ 'pf-v5-u-hidden': child.hidden?.() })}
+                        hidden={child.hidden?.()}
                         isActive={currentLocation.pathname === child.to}
                       >
                         <Link data-testid={child.title} to={child.to}>
@@ -48,8 +84,10 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
               return (
                 <NavItem
                   id={nav.title}
-                  className={clsx({ 'pf-v5-u-hidden': nav.hidden })}
+                  className={clsx({ 'pf-v5-u-hidden': nav.hidden?.() })}
+                  hidden={nav.hidden?.()}
                   key={nav.title}
+                  data-testid={nav.title}
                   itemId={index}
                   isActive={currentLocation.pathname === nav.to}
                 >
@@ -66,17 +104,13 @@ export const Navigation: FunctionComponent<INavigationSidebar> = (props) => {
   );
 };
 
-const navElements: NavElements = [
-  {
-    title: 'Visualization',
-    children: [
-      { title: 'Design', to: Links.Home },
-      { title: 'Source Code', to: Links.SourceCode },
-    ],
-  },
-  { title: 'Beans', to: Links.Beans },
-  { title: 'Rest', to: Links.Rest, hidden: true },
-  { title: 'Metadata', to: Links.Metadata },
-  { title: 'Pipe ErrorHandler', to: Links.PipeErrorHandler },
-  { title: 'Catalog', to: Links.Catalog },
-];
+const NAVIGATION_ELEMENTS = {
+  Beans: [SourceSchemaType.Route, SourceSchemaType.Kamelet],
+  Metadata: [
+    SourceSchemaType.Integration,
+    SourceSchemaType.Kamelet,
+    SourceSchemaType.KameletBinding,
+    SourceSchemaType.Pipe,
+  ],
+  PipeErrorHandler: [SourceSchemaType.KameletBinding, SourceSchemaType.Pipe],
+};
diff --git a/packages/ui/src/layout/Shell.scss b/packages/ui/src/layout/Shell.scss
index ec0908e53..5d94003f1 100644
--- a/packages/ui/src/layout/Shell.scss
+++ b/packages/ui/src/layout/Shell.scss
@@ -16,3 +16,8 @@
 .pf-v5-c-panel {
   --pf-v5-c-panel--m-scrollable__main--MaxHeight: none;
 }
+
+.pf-v5-u-hidden {
+  display: none;
+  clip: rect(0 0 0 0);
+}
diff --git a/packages/ui/src/layout/__snapshots__/Navigation.test.tsx.snap b/packages/ui/src/layout/__snapshots__/Navigation.test.tsx.snap
new file mode 100644
index 000000000..76987f1d6
--- /dev/null
+++ b/packages/ui/src/layout/__snapshots__/Navigation.test.tsx.snap
@@ -0,0 +1,796 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation Component navigation sidebar for: Integration 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="false"
+    class="pf-v5-c-page__sidebar pf-m-expanded"
+    id="vertical-sidebar"
+  >
+    <div
+      class="pf-v5-c-page__sidebar-body"
+    >
+      <nav
+        aria-label="Default global nav"
+        class="pf-v5-c-nav"
+        data-ouia-component-id="OUIA-Generated-Nav-5"
+        data-ouia-component-type="PF5/Nav"
+        data-ouia-safe="true"
+      >
+        <ul
+          class="pf-v5-c-nav__list"
+          role="list"
+        >
+          <li
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
+            data-ouia-component-id="OUIA-Generated-NavExpandable-5"
+            data-ouia-component-type="PF5/NavExpandable"
+            data-ouia-safe="true"
+            data-testid="Visualization"
+          >
+            <button
+              aria-expanded="true"
+              class="pf-v5-c-nav__link"
+              id="Visualization"
+            >
+              Visualization
+              <span
+                class="pf-v5-c-nav__toggle"
+              >
+                <span
+                  class="pf-v5-c-nav__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <section
+              aria-labelledby="Visualization"
+              class="pf-v5-c-nav__subnav"
+            >
+              <ul
+                class="pf-v5-c-nav__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-25"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v5-c-nav__link pf-m-current"
+                    data-testid="Design"
+                    href="/"
+                  >
+                    Design
+                  </a>
+                </li>
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-26"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v5-c-nav__link"
+                    data-testid="Source Code"
+                    href="/code"
+                  >
+                    Source Code
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-27"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Beans"
+              href="/beans"
+            >
+              Beans
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-28"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Metadata"
+              href="/metadata"
+            >
+              Metadata
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-29"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Pipe ErrorHandler"
+              href="/pipe-error-handler"
+            >
+              Pipe ErrorHandler
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-30"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Catalog"
+              href="/catalog"
+            >
+              Catalog
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Navigation Component navigation sidebar for: Kamelet 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="false"
+    class="pf-v5-c-page__sidebar pf-m-expanded"
+    id="vertical-sidebar"
+  >
+    <div
+      class="pf-v5-c-page__sidebar-body"
+    >
+      <nav
+        aria-label="Default global nav"
+        class="pf-v5-c-nav"
+        data-ouia-component-id="OUIA-Generated-Nav-2"
+        data-ouia-component-type="PF5/Nav"
+        data-ouia-safe="true"
+      >
+        <ul
+          class="pf-v5-c-nav__list"
+          role="list"
+        >
+          <li
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
+            data-ouia-component-id="OUIA-Generated-NavExpandable-2"
+            data-ouia-component-type="PF5/NavExpandable"
+            data-ouia-safe="true"
+            data-testid="Visualization"
+          >
+            <button
+              aria-expanded="true"
+              class="pf-v5-c-nav__link"
+              id="Visualization"
+            >
+              Visualization
+              <span
+                class="pf-v5-c-nav__toggle"
+              >
+                <span
+                  class="pf-v5-c-nav__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <section
+              aria-labelledby="Visualization"
+              class="pf-v5-c-nav__subnav"
+            >
+              <ul
+                class="pf-v5-c-nav__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-7"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v5-c-nav__link pf-m-current"
+                    data-testid="Design"
+                    href="/"
+                  >
+                    Design
+                  </a>
+                </li>
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-8"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v5-c-nav__link"
+                    data-testid="Source Code"
+                    href="/code"
+                  >
+                    Source Code
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-9"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Beans"
+              href="/beans"
+            >
+              Beans
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-10"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Metadata"
+              href="/metadata"
+            >
+              Metadata
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-11"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Pipe ErrorHandler"
+              href="/pipe-error-handler"
+            >
+              Pipe ErrorHandler
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-12"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Catalog"
+              href="/catalog"
+            >
+              Catalog
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Navigation Component navigation sidebar for: KameletBinding 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="false"
+    class="pf-v5-c-page__sidebar pf-m-expanded"
+    id="vertical-sidebar"
+  >
+    <div
+      class="pf-v5-c-page__sidebar-body"
+    >
+      <nav
+        aria-label="Default global nav"
+        class="pf-v5-c-nav"
+        data-ouia-component-id="OUIA-Generated-Nav-4"
+        data-ouia-component-type="PF5/Nav"
+        data-ouia-safe="true"
+      >
+        <ul
+          class="pf-v5-c-nav__list"
+          role="list"
+        >
+          <li
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
+            data-ouia-component-id="OUIA-Generated-NavExpandable-4"
+            data-ouia-component-type="PF5/NavExpandable"
+            data-ouia-safe="true"
+            data-testid="Visualization"
+          >
+            <button
+              aria-expanded="true"
+              class="pf-v5-c-nav__link"
+              id="Visualization"
+            >
+              Visualization
+              <span
+                class="pf-v5-c-nav__toggle"
+              >
+                <span
+                  class="pf-v5-c-nav__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <section
+              aria-labelledby="Visualization"
+              class="pf-v5-c-nav__subnav"
+            >
+              <ul
+                class="pf-v5-c-nav__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-19"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v5-c-nav__link pf-m-current"
+                    data-testid="Design"
+                    href="/"
+                  >
+                    Design
+                  </a>
+                </li>
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-20"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v5-c-nav__link"
+                    data-testid="Source Code"
+                    href="/code"
+                  >
+                    Source Code
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-21"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Beans"
+              href="/beans"
+            >
+              Beans
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-22"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Metadata"
+              href="/metadata"
+            >
+              Metadata
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-23"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Pipe ErrorHandler"
+              href="/pipe-error-handler"
+            >
+              Pipe ErrorHandler
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-24"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Catalog"
+              href="/catalog"
+            >
+              Catalog
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Navigation Component navigation sidebar for: Pipe 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="false"
+    class="pf-v5-c-page__sidebar pf-m-expanded"
+    id="vertical-sidebar"
+  >
+    <div
+      class="pf-v5-c-page__sidebar-body"
+    >
+      <nav
+        aria-label="Default global nav"
+        class="pf-v5-c-nav"
+        data-ouia-component-id="OUIA-Generated-Nav-3"
+        data-ouia-component-type="PF5/Nav"
+        data-ouia-safe="true"
+      >
+        <ul
+          class="pf-v5-c-nav__list"
+          role="list"
+        >
+          <li
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
+            data-ouia-component-id="OUIA-Generated-NavExpandable-3"
+            data-ouia-component-type="PF5/NavExpandable"
+            data-ouia-safe="true"
+            data-testid="Visualization"
+          >
+            <button
+              aria-expanded="true"
+              class="pf-v5-c-nav__link"
+              id="Visualization"
+            >
+              Visualization
+              <span
+                class="pf-v5-c-nav__toggle"
+              >
+                <span
+                  class="pf-v5-c-nav__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <section
+              aria-labelledby="Visualization"
+              class="pf-v5-c-nav__subnav"
+            >
+              <ul
+                class="pf-v5-c-nav__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-13"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v5-c-nav__link pf-m-current"
+                    data-testid="Design"
+                    href="/"
+                  >
+                    Design
+                  </a>
+                </li>
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-14"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v5-c-nav__link"
+                    data-testid="Source Code"
+                    href="/code"
+                  >
+                    Source Code
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-15"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Beans"
+              href="/beans"
+            >
+              Beans
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-16"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Metadata"
+              href="/metadata"
+            >
+              Metadata
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-17"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Pipe ErrorHandler"
+              href="/pipe-error-handler"
+            >
+              Pipe ErrorHandler
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-18"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Catalog"
+              href="/catalog"
+            >
+              Catalog
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Navigation Component navigation sidebar for: Route 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="false"
+    class="pf-v5-c-page__sidebar pf-m-expanded"
+    id="vertical-sidebar"
+  >
+    <div
+      class="pf-v5-c-page__sidebar-body"
+    >
+      <nav
+        aria-label="Default global nav"
+        class="pf-v5-c-nav"
+        data-ouia-component-id="OUIA-Generated-Nav-1"
+        data-ouia-component-type="PF5/Nav"
+        data-ouia-safe="true"
+      >
+        <ul
+          class="pf-v5-c-nav__list"
+          role="list"
+        >
+          <li
+            class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
+            data-ouia-component-id="OUIA-Generated-NavExpandable-1"
+            data-ouia-component-type="PF5/NavExpandable"
+            data-ouia-safe="true"
+            data-testid="Visualization"
+          >
+            <button
+              aria-expanded="true"
+              class="pf-v5-c-nav__link"
+              id="Visualization"
+            >
+              Visualization
+              <span
+                class="pf-v5-c-nav__toggle"
+              >
+                <span
+                  class="pf-v5-c-nav__toggle-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+            <section
+              aria-labelledby="Visualization"
+              class="pf-v5-c-nav__subnav"
+            >
+              <ul
+                class="pf-v5-c-nav__list"
+                role="list"
+              >
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-1"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    aria-current="page"
+                    class="pf-v5-c-nav__link pf-m-current"
+                    data-testid="Design"
+                    href="/"
+                  >
+                    Design
+                  </a>
+                </li>
+                <li
+                  class="pf-v5-c-nav__item"
+                  data-ouia-component-id="OUIA-Generated-NavItem-2"
+                  data-ouia-component-type="PF5/NavItem"
+                  data-ouia-safe="true"
+                >
+                  <a
+                    class="pf-v5-c-nav__link"
+                    data-testid="Source Code"
+                    href="/code"
+                  >
+                    Source Code
+                  </a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-3"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Beans"
+              href="/beans"
+            >
+              Beans
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-4"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Metadata"
+              href="/metadata"
+            >
+              Metadata
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item pf-v5-u-hidden"
+            data-ouia-component-id="OUIA-Generated-NavItem-5"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Pipe ErrorHandler"
+              href="/pipe-error-handler"
+            >
+              Pipe ErrorHandler
+            </a>
+          </li>
+          <li
+            class="pf-v5-c-nav__item"
+            data-ouia-component-id="OUIA-Generated-NavItem-6"
+            data-ouia-component-type="PF5/NavItem"
+            data-ouia-safe="true"
+          >
+            <a
+              class="pf-v5-c-nav__link"
+              data-testid="Catalog"
+              href="/catalog"
+            >
+              Catalog
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/ui/src/layout/navigation.models.ts b/packages/ui/src/layout/navigation.models.ts
index 4f339cafa..b2dcb9485 100644
--- a/packages/ui/src/layout/navigation.models.ts
+++ b/packages/ui/src/layout/navigation.models.ts
@@ -9,13 +9,13 @@ export interface SelectedNavItem {
 interface SingleNavElement {
   title: string;
   to: Links;
-  hidden?: boolean;
+  hidden?: () => boolean;
 }
 
 interface NestedNavElement {
   title: string;
   children: SingleNavElement[];
-  hidden?: boolean;
+  hidden?: () => boolean;
 }
 
 export type NavElements = Array<SingleNavElement | NestedNavElement>;