chore: Extract sidebar item injection token into separate package

- Add unit tests to cover custom resources sidebar items Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2023-05-31 14:23:53 -04:00
1 parent d28da8e7ac
commit 500ac15703
@@ -5,7 +5,7 @@
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 import { computed } from "mobx";
-import { byOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
+import { byOrderNumber } from "@k8slens/utilities";
 import type { CatalogEntity } from "../../../api/catalog-entity";
 import { catalogEntityDetailItemInjectionToken } from "./token";

@@ -5,39 +5,30 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { Icon } from "@k8slens/icon";
 import React from "react";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
-import { computed } from "mobx";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import clusterOverviewRouteInjectable from "../../../common/front-end-routing/routes/cluster/overview/cluster-overview-route.injectable";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToClusterOverviewInjectable from "../../../common/front-end-routing/routes/cluster/overview/navigate-to-cluster-overview.injectable";

-const clusterOverviewSidebarItemsInjectable = getInjectable({
-  id: "cluster-overview-sidebar-items",
+const clusterOverviewSidebarItemInjectable = getInjectable({
+  id: "cluster-overview-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(clusterOverviewRouteInjectable);
-    const navigateToClusterOverview = di.inject(navigateToClusterOverviewInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "cluster-overview",
-        parentId: null,
-        title: "Cluster",
-        getIcon: () => <Icon svg="kube" />,
-        onClick: navigateToClusterOverview,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "cluster-overview",
+      parentId: null,
+      title: "Cluster",
+      getIcon: () => <Icon svg="kube" />,
+      onClick: di.inject(navigateToClusterOverviewInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default clusterOverviewSidebarItemsInjectable;
+export default clusterOverviewSidebarItemInjectable;
@@ -10,6 +10,7 @@ import type { IComputedValue } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import type { NodeStore } from "../nodes/store";
 import type { PodStore } from "../workloads-pods/store";
+import { byOrderNumber } from "@k8slens/utilities";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
 import { ClusterIssues } from "./cluster-issues";
@@ -25,7 +26,6 @@ import nodeStoreInjectable from "../nodes/store.injectable";
 import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable";
 import type { ClusterOverviewUIBlock } from "@k8slens/metrics";
 import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
-import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 import type { ClusterMetricData } from "../../../common/k8s-api/endpoints/metrics.api/request-cluster-metrics-by-node-names.injectable";
 import clusterOverviewMetricsInjectable from "./cluster-metrics.injectable";
@@ -56,10 +56,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
    return (
      <>
        {
-          orderByOrderNumber(this.props.uiBlocks.get())
-            .map((block) => (
-              <block.Component key={block.id} />
-            ))
+          [...this.props.uiBlocks.get()]
+            .sort(byOrderNumber)
+            .map(block => <block.Component key={block.id}/>)
        }
        <ClusterIssues />
      </>
@@ -34,7 +34,7 @@ import navigateToDaemonsetsInjectable from "../../../../common/front-end-routing
 import navigateToStatefulsetsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/statefulsets/navigate-to-statefulsets.injectable";
 import navigateToJobsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/jobs/navigate-to-jobs.injectable";
 import navigateToCronJobsInjectable from "../../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/navigate-to-cron-jobs.injectable";
-import navigateToCustomResourcesInjectable from "../../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable";
+import navigateToCustomResourcesInjectable from "../../../../common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable";
 import navigateToEntitySettingsInjectable from "../../../../common/front-end-routing/routes/entity-settings/navigate-to-entity-settings.injectable";

 // TODO: Importing from features is not OK. Make commands to comply with Open Closed Principle to allow moving implementation under a feature
@@ -3,36 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
 import horizontalPodAutoscalersRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/horizontal-pod-autoscalers/horizontal-pod-autoscalers-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToHorizontalPodAutoscalersInjectable from "../../../common/front-end-routing/routes/cluster/config/horizontal-pod-autoscalers/navigate-to-horizontal-pod-autoscalers.injectable";

-const horizontalPodAutoScalersSidebarItemsInjectable = getInjectable({
-  id: "horizontal-pod-auto-scalers-sidebar-items",
+const horizontalPodAutoScalersSidebarItemInjectable = getInjectable({
+  id: "horizontal-pod-auto-scalers-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(horizontalPodAutoscalersRouteInjectable);
-    const navigateToHorizontalPodAutoscalers = di.inject(navigateToHorizontalPodAutoscalersInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "horizontal-pod-auto-scalers",
-        parentId: configSidebarItemId,
-        title: "HPA",
-        onClick: navigateToHorizontalPodAutoscalers,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 50,
-      },
-    ]);
+    return {
+      id: "horizontal-pod-auto-scalers",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "HPA",
+      onClick: di.inject(navigateToHorizontalPodAutoscalersInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 50,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default horizontalPodAutoScalersSidebarItemsInjectable;
+export default horizontalPodAutoScalersSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import leasesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/leases-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToLeasesInjectable from "../../../common/front-end-routing/routes/cluster/config/leases/navigate-to-leases.injectable";

-const leasesSidebarItemsInjectable = getInjectable({
-  id: "leases-sidebar-items",
+const leasesSidebarItemInjectable = getInjectable({
+  id: "leases-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(leasesRouteInjectable);
-    const navigateToLeases = di.inject(navigateToLeasesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "leases",
-        parentId: configSidebarItemId,
-        title: "Leases",
-        onClick: navigateToLeases,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 80,
-      },
-    ]);
+    return {
+      id: "leases",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Leases",
+      onClick: di.inject(navigateToLeasesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 80,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default leasesSidebarItemsInjectable;
+export default leasesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import limitRangesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/limit-ranges/limit-ranges-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToLimitRangesInjectable from "../../../common/front-end-routing/routes/cluster/config/limit-ranges/navigate-to-limit-ranges.injectable";

-const limitRangesSidebarItemsInjectable = getInjectable({
-  id: "limit-ranges-sidebar-items",
+const limitRangesSidebarItemInjectable = getInjectable({
+  id: "limit-ranges-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(limitRangesRouteInjectable);
-    const navigateToLimitRanges = di.inject(navigateToLimitRangesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "limit-ranges",
-        parentId: configSidebarItemId,
-        title: "Limit Ranges",
-        onClick: navigateToLimitRanges,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 40,
-      },
-    ]);
+    return {
+      id: "limit-ranges",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Limit Ranges",
+      onClick: di.inject(navigateToLimitRangesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 40,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default limitRangesSidebarItemsInjectable;
+export default limitRangesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import configMapsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/config-maps/config-maps-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToConfigMapsInjectable from "../../../common/front-end-routing/routes/cluster/config/config-maps/navigate-to-config-maps.injectable";

-const configMapsSidebarItemsInjectable = getInjectable({
-  id: "config-maps-sidebar-items",
+const configMapsSidebarItemInjectable = getInjectable({
+  id: "config-maps-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(configMapsRouteInjectable);
-    const navigateToConfigMaps = di.inject(navigateToConfigMapsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "config-maps",
-        parentId: configSidebarItemId,
-        title: "ConfigMaps",
-        onClick: navigateToConfigMaps,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "config-maps",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "ConfigMaps",
+      onClick: di.inject(navigateToConfigMapsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default configMapsSidebarItemsInjectable;
+export default configMapsSidebarItemInjectable;
@@ -3,37 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
-import mutatingWebhookConfigurationsRouteInjectable
-  from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/mutating-webhook-configurations-route.injectable";
-import navigateToMutatingWebhookConfigurationsInjectable
-  from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/navigate-to-mutating-webhook-configurations.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
+import mutatingWebhookConfigurationsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/mutating-webhook-configurations-route.injectable";
+import navigateToMutatingWebhookConfigurationsInjectable from "../../../common/front-end-routing/routes/cluster/config/mutating-webhook-configurations/navigate-to-mutating-webhook-configurations.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";

-const mutatingWebhookConfigurationsSidebarItemsInjectable = getInjectable({
-  id: "mutating-webhook-configurations-sidebar-items",
+const mutatingWebhookConfigurationsSidebarItemInjectable = getInjectable({
+  id: "mutating-webhook-configurations-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(mutatingWebhookConfigurationsRouteInjectable);
-    const navigateToPage = di.inject(navigateToMutatingWebhookConfigurationsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "mutating-webhook-configurations",
-        parentId: configSidebarItemId,
-        title: "Mutating Webhook Configs",
-        onClick: navigateToPage,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 100,
-      },
-    ]);
+    return {
+      id: "mutating-webhook-configurations",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Mutating Webhook Configs",
+      onClick: di.inject(navigateToMutatingWebhookConfigurationsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 100,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default mutatingWebhookConfigurationsSidebarItemsInjectable;
+export default mutatingWebhookConfigurationsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import podDisruptionBudgetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/pod-disruption-budgets/pod-disruption-budgets-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPodDisruptionBudgetsInjectable from "../../../common/front-end-routing/routes/cluster/config/pod-disruption-budgets/navigate-to-pod-disruption-budgets.injectable";

-const podDisruptionBudgetsSidebarItemsInjectable = getInjectable({
-  id: "pod-disruption-budgets-sidebar-items",
+const podDisruptionBudgetsSidebarItemInjectable = getInjectable({
+  id: "pod-disruption-budgets-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(podDisruptionBudgetsRouteInjectable);
-    const navigateToPodDisruptionBudgets = di.inject(navigateToPodDisruptionBudgetsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "pod-disruption-budgets",
-        parentId: configSidebarItemId,
-        title: "Pod Disruption Budgets",
-        onClick: navigateToPodDisruptionBudgets,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 60,
-      },
-    ]);
+    return {
+      id: "pod-disruption-budgets",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Pod Disruption Budgets",
+      onClick: di.inject(navigateToPodDisruptionBudgetsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 60,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default podDisruptionBudgetsSidebarItemsInjectable;
+export default podDisruptionBudgetsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import priorityClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/priority-classes/priority-classes-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPriorityClassesInjectable from "../../../common/front-end-routing/routes/cluster/config/priority-classes/navigate-to-priority-classes.injectable";

-const priorityClassesSidebarItemsInjectable = getInjectable({
-  id: "priority-classes-sidebar-items",
+const priorityClassesSidebarItemInjectable = getInjectable({
+  id: "priority-classes-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(priorityClassesRouteInjectable);
-    const navigateToPriorityClasses = di.inject(navigateToPriorityClassesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "priority-classes",
-        parentId: configSidebarItemId,
-        title: "Priority Classes",
-        onClick: navigateToPriorityClasses,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 70,
-      },
-    ]);
+    return {
+      id: "priority-classes",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Priority Classes",
+      onClick: di.inject(navigateToPriorityClassesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 70,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default priorityClassesSidebarItemsInjectable;
+export default priorityClassesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import resourceQuotasRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/resource-quotas/resource-quotas-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToResourceQuotasInjectable from "../../../common/front-end-routing/routes/cluster/config/resource-quotas/navigate-to-resource-quotas.injectable";

-const resourceQuotasSidebarItemsInjectable = getInjectable({
-  id: "resource-quotas-sidebar-items",
+const resourceQuotasSidebarItemInjectable = getInjectable({
+  id: "resource-quotas-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(resourceQuotasRouteInjectable);
-    const navigateToResourceQuotas = di.inject(navigateToResourceQuotasInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "resource-quotas",
-        parentId: configSidebarItemId,
-        title: "Resource Quotas",
-        onClick: navigateToResourceQuotas,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 30,
-      },
-    ]);
+    return {
+      id: "resource-quotas",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Resource Quotas",
+      onClick: di.inject(navigateToResourceQuotasInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 30,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default resourceQuotasSidebarItemsInjectable;
+export default resourceQuotasSidebarItemInjectable;
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-
-import runtimeClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/runtime-classes-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
-import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
-import navigateToRuntimeClassesInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/navigate-to-runtime-classes.injectable";
-
-const runtimeClassesSidebarItemsInjectable = getInjectable({
-  id: "runtime-classes-sidebar-items",
-
-  instantiate: (di) => {
-    const route = di.inject(runtimeClassesRouteInjectable);
-    const navigateToRuntimeClasses = di.inject(navigateToRuntimeClassesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);
-
-    return computed(() => [
-      {
-        id: "runtime-classes",
-        parentId: configSidebarItemId,
-        title: "Runtime Classes",
-        onClick: navigateToRuntimeClasses,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 70,
-      },
-    ]);
-  },
-
-  injectionToken: sidebarItemsInjectionToken,
-});
-
-export default runtimeClassesSidebarItemsInjectable;
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+
+import runtimeClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/runtime-classes-route.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import navigateToRuntimeClassesInjectable from "../../../common/front-end-routing/routes/cluster/config/runtime-classes/navigate-to-runtime-classes.injectable";
+
+const runtimeClassesSidebarItemInjectable = getInjectable({
+  id: "runtime-classes-sidebar-item",
+
+  instantiate: (di) => {
+    const route = di.inject(runtimeClassesRouteInjectable);
+
+    return {
+      id: "runtime-classes",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Runtime Classes",
+      onClick: di.inject(navigateToRuntimeClassesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 70,
+    };
+  },
+
+  injectionToken: sidebarItemInjectionToken,
+});
+
+export default runtimeClassesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import secretsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/secrets/secrets-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToSecretsInjectable from "../../../common/front-end-routing/routes/cluster/config/secrets/navigate-to-secrets.injectable";

-const secretsSidebarItemsInjectable = getInjectable({
-  id: "secrets-sidebar-items",
+const secretsSidebarItemInjectable = getInjectable({
+  id: "secrets-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(secretsRouteInjectable);
-    const navigateToSecrets = di.inject(navigateToSecretsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "secrets",
-        parentId: configSidebarItemId,
-        title: "Secrets",
-        onClick: navigateToSecrets,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "secrets",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Secrets",
+      onClick: di.inject(navigateToSecretsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default secretsSidebarItemsInjectable;
+export default secretsSidebarItemInjectable;
@@ -3,37 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
-import validatingWebhookConfigurationsRouteInjectable
-  from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/validating-webhook-configurations-route.injectable";
-import navigateToValidatingWebhookConfigurationsInjectable
-  from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/navigate-to-validating-webhook-configurations.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
+import validatingWebhookConfigurationsRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/validating-webhook-configurations-route.injectable";
+import navigateToValidatingWebhookConfigurationsInjectable from "../../../common/front-end-routing/routes/cluster/config/validating-webhook-configurations/navigate-to-validating-webhook-configurations.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";

-const validatingWebhookConfigurationsSidebarItemsInjectable = getInjectable({
-  id: "validating-webhook-configurations-sidebar-items",
+const validatingWebhookConfigurationsSidebarItemInjectable = getInjectable({
+  id: "validating-webhook-configurations-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(validatingWebhookConfigurationsRouteInjectable);
-    const navigateToPage = di.inject(navigateToValidatingWebhookConfigurationsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "validating-webhook-configurations",
-        parentId: configSidebarItemId,
-        title: "Validating Webhook Configs",
-        onClick: navigateToPage,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 100,
-      },
-    ]);
+    return {
+      id: "validating-webhook-configurations",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "Validating Webhook Configs",
+      onClick: di.inject(navigateToValidatingWebhookConfigurationsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 100,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default validatingWebhookConfigurationsSidebarItemsInjectable;
+export default validatingWebhookConfigurationsSidebarItemInjectable;
@@ -3,36 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
 import verticalPodAutoscalersRouteInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/vertical-pod-autoscalers-route.injectable";
-import { configSidebarItemId } from "../config/config-sidebar-items.injectable";
-import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import configSidebarItemInjectable from "../config/config-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToVerticalPodAutoscalersInjectable from "../../../common/front-end-routing/routes/cluster/config/vertical-pod-autoscalers/navigate-to-vertical-pod-autoscalers.injectable";

-const verticalPodAutoScalersSidebarItemsInjectable = getInjectable({
-  id: "vertical-pod-auto-scalers-sidebar-items",
+const verticalPodAutoScalersSidebarItemInjectable = getInjectable({
+  id: "vertical-pod-auto-scalers-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(verticalPodAutoscalersRouteInjectable);
-    const navigateToVerticalPodAutoscalers = di.inject(navigateToVerticalPodAutoscalersInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "vertical-pod-auto-scalers",
-        parentId: configSidebarItemId,
-        title: "VPA",
-        onClick: navigateToVerticalPodAutoscalers,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 50,
-      },
-    ]);
+    return {
+      id: "vertical-pod-auto-scalers",
+      parentId: di.inject(configSidebarItemInjectable).id,
+      title: "VPA",
+      onClick: di.inject(navigateToVerticalPodAutoscalersInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 50,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default verticalPodAutoScalersSidebarItemsInjectable;
+export default verticalPodAutoScalersSidebarItemInjectable;
@@ -5,32 +5,22 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { Icon } from "@k8slens/icon";
 import React from "react";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
-import { computed } from "mobx";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { noop } from "lodash/fp";

-export const configSidebarItemId = "config";
+const configSidebarItemInjectable = getInjectable({
+  id: "config-sidebar-item",

-const configSidebarItemsInjectable = getInjectable({
-  id: "config-sidebar-items",
+  instantiate: () => ({
+    id: "config",
+    parentId: null,
+    title: "Config",
+    getIcon: () => <Icon material="list" />,
+    onClick: noop,
+    orderNumber: 40,
+  }),

-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: configSidebarItemId,
-        parentId: null,
-        title: "Config",
-        getIcon: () => <Icon material="list" />,
-        onClick: noop,
-        orderNumber: 40,
-      },
-    ]),
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default configSidebarItemsInjectable;
+export default configSidebarItemInjectable;
@@ -4,7 +4,7 @@
 */
 import { getInjectable } from "@ogre-tools/injectable";
 import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
-import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable";
+import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable";
 import { CustomResourceDefinitions } from "./crd-list";

 const crdListRouteComponentInjectable = getInjectable({
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import type { SidebarItemRegistration } from "@k8slens/cluster-sidebar";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import type { CustomResourceDefinition } from "@k8slens/kube-object";
+import { iter, noop, computedAnd } from "@k8slens/utilities";
+import { getInjectable } from "@ogre-tools/injectable";
+import { matches } from "lodash";
+import { computed } from "mobx";
+import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable";
+import navigateToCustomResourcesInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable";
+import { shouldShowResourceInjectionToken } from "../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import routePathParametersInjectable from "../../routes/route-path-parameters.injectable";
+import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-items.injectable";
+import customResourceDefinitionsInjectable from "./custom-resources.injectable";
+
+const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectable({
+  id: "custom-resource-definition-groups-sidebar-items-computed",
+  instantiate: (di) => {
+    const customResourceDefinitions = di.inject(customResourceDefinitionsInjectable);
+    const navigateToCustomResources = di.inject(navigateToCustomResourcesInjectable);
+    const customResourcesRoute = di.inject(customResourcesRouteInjectable);
+    const pathParameters = di.inject(routePathParametersInjectable, customResourcesRoute);
+
+    const toCustomResourceGroupToSidebarItems = ([group, definitions]: [string, CustomResourceDefinition[]], index: number) => {
+      const customResourceGroupSidebarItem = getInjectable({
+        id: `custom-resource-group-${group}-sidebar-item`,
+        instantiate: (di): SidebarItemRegistration => ({
+          id: `custom-resource-group-${group}`,
+          parentId: di.inject(customResourcesSidebarItemInjectable).id,
+          onClick: noop,
+          title: group,
+          orderNumber: 10 * index,
+        }),
+        injectionToken: sidebarItemInjectionToken,
+      });
+      const customResourceSidebarItems = definitions.map((definition, index) => {
+        const parameters = {
+          group: definition.getGroup(),
+          name: definition.getPluralName(),
+        };
+
+        return getInjectable({
+          id: `custom-resource-group-${group}/${definition.getPluralName()}-sidebar-item`,
+          instantiate: (di): SidebarItemRegistration => ({
+            id: `custom-resource-group-${group}/${definition.getPluralName()}`,
+            parentId: di.inject(customResourceGroupSidebarItem).id,
+            onClick: () => navigateToCustomResources(parameters),
+            title: definition.getResourceKind(),
+            isActive: computedAnd(
+              di.inject(routeIsActiveInjectable, customResourcesRoute),
+              computed(() => matches(parameters)(pathParameters.get())),
+            ),
+            isVisible: di.inject(shouldShowResourceInjectionToken, {
+              group: definition.getGroup(),
+              apiName: definition.getPluralName(),
+            }),
+            orderNumber: 10 * index,
+          }),
+          injectionToken: sidebarItemInjectionToken,
+        });
+      });
+
+      return [
+        customResourceGroupSidebarItem,
+        ...customResourceSidebarItems,
+      ];
+    };
+
+    return computed(() => {
+      const customResourceDefinitionGroups = (
+        iter.chain(customResourceDefinitions.get().values())
+          .map((crd) => [crd.getGroup(), crd] as const)
+          .toMap()
+      );
+
+      return Array.from(customResourceDefinitionGroups.entries(), toCustomResourceGroupToSidebarItems)
+        .flat();
+    });
+  },
+});
+
+export default customResourceDefinitionGroupsSidebarItemsComputedInjectable;
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { reaction } from "mobx";
+import { injectableDifferencingRegistratorWith } from "../../../common/utils/registrator-helper";
+import { beforeClusterFrameStartsSecondInjectionToken } from "../../before-frame-starts/tokens";
+import customResourceDefinitionGroupsSidebarItemsComputedInjectable from "./custom-resource-definition-groups-sidebar-items-computed.injectable";
+
+const customResourceDefinitionGroupsSidebarItemsRegistratorInjectable = getInjectable({
+  id: "custom-resource-definition-groups-sidebar-items-registrator",
+  instantiate: (di) => ({
+    run: () => {
+      const sidebarItems = di.inject(customResourceDefinitionGroupsSidebarItemsComputedInjectable);
+      const injectableDifferencingRegistrator = injectableDifferencingRegistratorWith(di);
+
+      reaction(
+        () => sidebarItems.get(),
+        injectableDifferencingRegistrator,
+        { fireImmediately: true },
+      );
+    },
+  }),
+  injectionToken: beforeClusterFrameStartsSecondInjectionToken,
+});
+
+export default customResourceDefinitionGroupsSidebarItemsRegistratorInjectable;
+
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import { getInjectable } from "@ogre-tools/injectable";
+import customResourceDefinitionsRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resource-definitions.injectable";
+import navigateToCustomResourcesInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/navigate-to-custom-resources.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-items.injectable";
+
+const customResourceDefinitionsSidebarItemInjectable = getInjectable({
+  id: "custom-resource-definitions-sidebar-item",
+  instantiate: (di) => {
+    const customResourceDefinitionsRoute = di.inject(customResourceDefinitionsRouteInjectable);
+
+    return {
+      id: "custom-resource-definitions",
+      parentId: di.inject(customResourcesSidebarItemInjectable).id,
+      title: "Definitions",
+      onClick: di.inject(navigateToCustomResourcesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, customResourceDefinitionsRoute),
+      isVisible: customResourceDefinitionsRoute.isEnabled,
+      orderNumber: 10,
+    };
+  },
+  injectionToken: sidebarItemInjectionToken,
+});
+
+export default customResourceDefinitionsSidebarItemInjectable;
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { noop } from "lodash/fp";
-import { computed } from "mobx";
-import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
-import { Icon } from "@k8slens/icon";
-import React from "react";
-import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable";
-import sidebarItemsForDefinitionGroupsInjectable from "./sidebar-items-for-definition-groups.injectable";
-import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
-import navigateToCrdListInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/navigate-to-crd-list.injectable";
-
-const customResourceSidebarItemsInjectable = getInjectable({
-  id: "custom-resource-sidebar-items",
-
-  instantiate: (di) => {
-    const navigateToCrdList = di.inject(navigateToCrdListInjectable);
-    const crdListRoute = di.inject(crdListRouteInjectable);
-    const crdListRouteIsActive = di.inject(routeIsActiveInjectable, crdListRoute);
-    const definitionGroupSidebarItems = di.inject(sidebarItemsForDefinitionGroupsInjectable);
-
-    return computed((): SidebarItemRegistration[] => {
-      const definitionsItem = {
-        id: "definitions",
-        parentId: "custom-resources",
-        title: "Definitions",
-        onClick: navigateToCrdList,
-        isActive: crdListRouteIsActive,
-        isVisible: crdListRoute.isEnabled,
-        orderNumber: 10,
-      };
-
-      const childrenAndGrandChildren = computed(() => [
-        definitionsItem,
-        ...definitionGroupSidebarItems.get(),
-      ]);
-
-      const parentItem: SidebarItemRegistration = {
-        id: "custom-resources",
-        parentId: null,
-        title: "Custom Resources",
-        getIcon: () => <Icon material="extension" />,
-        onClick: noop,
-        isVisible: computed(() => childrenAndGrandChildren.get().some(item => item.isVisible?.get())),
-        orderNumber: 110,
-      };
-
-      return [parentItem, definitionsItem, ...definitionGroupSidebarItems.get()];
-    });
-  },
-
-  injectionToken: sidebarItemsInjectionToken,
-});
-
-export default customResourceSidebarItemsInjectable;
@@ -4,7 +4,7 @@
 */
 import { getInjectable } from "@ogre-tools/injectable";
 import { CustomResources } from "./crd-resources";
-import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable";
+import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable";
 import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";

 const customResourcesRouteComponentInjectable = getInjectable({
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
 import routePathParametersInjectable from "../../routes/route-path-parameters.injectable";
-import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable";
+import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources-route.injectable";

 const customResourcesRouteParametersInjectable = getInjectable({
  id: "custom-resources-route-parameters",
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import { noop } from "@k8slens/utilities";
+import { getInjectable } from "@ogre-tools/injectable";
+import React from "react";
+import { Icon } from "../icon";
+
+const customResourcesSidebarItemInjectable = getInjectable({
+  id: "custom-resources-sidebar-item",
+  instantiate: () => ({
+    id: "custom-resources",
+    parentId: null,
+    title: "Custom Resources",
+    getIcon: () => <Icon material="extension" />,
+    onClick: noop,
+    orderNumber: 110,
+  }),
+  injectionToken: sidebarItemInjectionToken,
+});
+
+export default customResourcesSidebarItemInjectable;
@@ -1,81 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import crdListRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/crd-list/crd-list-route.injectable";
-import customResourceDefinitionsInjectable from "./custom-resources.injectable";
-import { groupBy, matches, noop, some, toPairs } from "lodash/fp";
-import customResourcesRouteInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/custom-resources-route.injectable";
-import type { SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
-import navigateToCustomResourcesInjectable from "../../../common/front-end-routing/routes/cluster/custom-resources/custom-resources/navigate-to-custom-resources.injectable";
-import routePathParametersInjectable from "../../routes/route-path-parameters.injectable";
-
-const sidebarItemsForDefinitionGroupsInjectable = getInjectable({
-  id: "sidebar-items-for-definition-groups",
-
-  instantiate: (di) => {
-    const customResourceDefinitions = di.inject(
-      customResourceDefinitionsInjectable,
-    );
-
-    const crdRoute = di.inject(customResourcesRouteInjectable);
-    const crdRouteIsActive = di.inject(routeIsActiveInjectable, crdRoute);
-    const crdListRoute = di.inject(crdListRouteInjectable);
-    const pathParameters = di.inject(routePathParametersInjectable, crdRoute);
-    const navigateToCustomResources = di.inject(navigateToCustomResourcesInjectable);
-
-    return computed((): SidebarItemRegistration[] => {
-      const definitions = customResourceDefinitions.get();
-
-      const groupedCrds = toPairs(
-        groupBy((crd) => crd.getGroup(), definitions),
-      );
-
-      return groupedCrds.flatMap(([group, definitions]) => {
-        const childItems = definitions.map((crd) => {
-          const title = crd.getResourceKind();
-
-          const crdPathParameters = {
-            group: crd.getGroup(),
-            name: crd.getPluralName(),
-          };
-
-          return {
-            id: `custom-resource-definition-group-${group}-crd-${crd.getId()}`,
-            parentId: `custom-resource-definition-group-${group}`,
-            title,
-
-            onClick: () => navigateToCustomResources(crdPathParameters),
-
-            isActive: computed(
-              () =>
-                crdRouteIsActive.get() &&
-                matches(crdPathParameters, pathParameters.get()),
-            ),
-
-            isVisible: crdListRoute.isEnabled,
-            orderNumber: 10,
-          };
-        });
-
-        return [
-          {
-            id: `custom-resource-definition-group-${group}`,
-            parentId: "custom-resources",
-            title: group,
-            onClick: noop,
-            isVisible: computed(() => some(item => item.isVisible.get(), childItems)),
-            orderNumber: 10,
-          },
-
-          ...childItems,
-        ];
-      });
-    });
-  },
-});
-
-export default sidebarItemsForDefinitionGroupsInjectable;
@@ -4,7 +4,7 @@
 */
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { action } from "mobx";
-import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
+import { byOrderNumber } from "@k8slens/utilities";
 import type { CatalogEntity } from "../../api/catalog-entity";
 import { observableHistoryInjectionToken } from "@k8slens/routing";
 import type { RegisteredEntitySetting } from "./extension-registrator.injectable";
@@ -5,7 +5,7 @@
 import { getInjectable, lifecycleEnum } from "@ogre-tools/injectable";
 import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
 import { computed } from "mobx";
-import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
+import { byOrderNumber } from "@k8slens/utilities";
 import type { CatalogEntity } from "../../api/catalog-entity";
 import { entitySettingInjectionToken } from "./token";

@@ -3,42 +3,33 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
 import React from "react";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";

 import eventsRouteInjectable from "../../../common/front-end-routing/routes/cluster/events/events-route.injectable";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToEventsInjectable from "../../../common/front-end-routing/routes/cluster/events/navigate-to-events.injectable";

-const eventsSidebarItemsInjectable = getInjectable({
-  id: "events-sidebar-items",
+const eventsSidebarItemInjectable = getInjectable({
+  id: "events-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(eventsRouteInjectable);
-    const navigateToEvents = di.inject(navigateToEventsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "events",
-        parentId: null,
-        getIcon: () => <Icon material="access_time" />,
-        title: "Events",
-        onClick: navigateToEvents,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 80,
-      },
-    ]);
+    return {
+      id: "events",
+      parentId: null,
+      getIcon: () => <Icon material="access_time" />,
+      title: "Events",
+      onClick: di.inject(navigateToEventsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 80,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default eventsSidebarItemsInjectable;
+export default eventsSidebarItemInjectable;
@@ -3,35 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
 import helmChartsRouteInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/helm-charts-route.injectable";
-import { helmSidebarItemId } from "../helm/helm-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import helmSidebarItemInjectable from "../helm/helm-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";

-const helmChartsSidebarItemsInjectable = getInjectable({
-  id: "helm-charts-sidebar-items",
+const helmChartsSidebarItemInjectable = getInjectable({
+  id: "helm-charts-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(helmChartsRouteInjectable);
-    const navigateToHelmCharts = di.inject(navigateToHelmChartsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "charts",
-        parentId: helmSidebarItemId,
-        title: "Charts",
-        onClick: navigateToHelmCharts,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "charts",
+      parentId: di.inject(helmSidebarItemInjectable).id,
+      title: "Charts",
+      onClick: di.inject(navigateToHelmChartsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default helmChartsSidebarItemsInjectable;
+export default helmChartsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import helmReleasesRouteInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/helm-releases-route.injectable";
-import { helmSidebarItemId } from "../helm/helm-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import helmSidebarItemInjectable from "../helm/helm-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToHelmReleasesInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";

-const helmReleasesSidebarItemsInjectable = getInjectable({
-  id: "helm-releases-sidebar-items",
+const helmReleasesSidebarItemInjectable = getInjectable({
+  id: "helm-releases-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(helmReleasesRouteInjectable);
-    const navigateToHelmReleases = di.inject(navigateToHelmReleasesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "releases",
-        parentId: helmSidebarItemId,
-        title: "Releases",
-        onClick: navigateToHelmReleases,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "releases",
+      parentId: di.inject(helmSidebarItemInjectable).id,
+      title: "Releases",
+      onClick: di.inject(navigateToHelmReleasesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default helmReleasesSidebarItemsInjectable;
+export default helmReleasesSidebarItemInjectable;
@@ -3,34 +3,24 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
 import React from "react";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import { noop } from "lodash/fp";

-export const helmSidebarItemId = "helm";
+const helmSidebarItemInjectable = getInjectable({
+  id: "helm-sidebar-item",

-const helmSidebarItemsInjectable = getInjectable({
-  id: "helm-sidebar-items",
+  instantiate: () => ({
+    id: "helm",
+    parentId: null,
+    getIcon: () => <Icon svg="helm" />,
+    title: "Helm",
+    onClick: noop,
+    orderNumber: 90,
+  }),

-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: helmSidebarItemId,
-        parentId: null,
-        getIcon: () => <Icon svg="helm" />,
-        title: "Helm",
-        onClick: noop,
-        orderNumber: 90,
-      },
-    ]),
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default helmSidebarItemsInjectable;
+export default helmSidebarItemInjectable;
@@ -5,8 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import React from "react";
 import { extensionRegistratorInjectionToken } from "../../../extensions/extension-loader/extension-registrator-injection-token";
-import type { SidebarItemRegistration } from "./sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "./sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { computed } from "mobx";
 import routesInjectable from "../../routes/routes.injectable";
 import { matches, noop } from "lodash/fp";
@@ -25,71 +24,66 @@ const extensionSidebarItemRegistratorInjectable = getInjectable({
    const routes = di.inject(routesInjectable);
    const extensionShouldBeEnabledForClusterFrame = di.inject(extensionShouldBeEnabledForClusterFrameInjectable, extension);

-    const sidebarItemsForExtensionInjectable = getInjectable({
-      id: `sidebar-items-for-extension-${extension.sanitizedExtensionId}`,
-      injectionToken: sidebarItemsInjectionToken,
+    return computed(() => {
+      const extensionRoutes = routes.get().filter(matches({ extension }));

-      instantiate: (di) => {
-        return computed(() => {
-          const extensionRoutes = routes.get().filter(matches({ extension }));
+      return extension.clusterPageMenus.map((registration) => {
+        const targetRoutePath = getExtensionRoutePath(
+          extension,
+          registration.target?.pageId,
+        );

-          return extension.clusterPageMenus.map((registration) => {
-            const targetRoutePath = getExtensionRoutePath(
-              extension,
-              registration.target?.pageId,
-            );
+        const targetRoute = extensionRoutes.find(
+          matches({ path: targetRoutePath }),
+        );

-            const targetRoute = extensionRoutes.find(
-              matches({ path: targetRoutePath }),
-            );
+        const isVisible = computed(() => {
+          if (!extensionShouldBeEnabledForClusterFrame.value.get()) {
+            return false;
+          }

-            const isVisible = computed(() => {
-              if (!extensionShouldBeEnabledForClusterFrame.value.get()) {
-                return false;
-              }
+          if (!registration.visible) {
+            return true;
+          }

-              if (!registration.visible) {
-                return true;
-              }
-
-              return registration.visible.get();
-            });
-
-            const res: SidebarItemRegistration = {
-              id: `${extension.sanitizedExtensionId}-${registration.id}`,
-              orderNumber: registration.orderNumber ?? 9999,
-
-              parentId: registration.parentId
-                ? `${extension.sanitizedExtensionId}-${registration.parentId}`
-                : null,
-
-              isVisible,
-
-              title: registration.title,
-              getIcon: registration.components.Icon
-                ? () => <registration.components.Icon />
-                : undefined,
-              ...(targetRoute
-                ? {
-                  onClick: () => navigateToRoute(targetRoute),
-
-                  isActive: di.inject(
-                    routeIsActiveInjectable,
-                    targetRoute,
-                  ),
-                }
-                : { onClick: noop }),
-            };
-
-            return res;
-          });
+          return registration.visible.get();
        });
-      },
-    });

-    return [
-      sidebarItemsForExtensionInjectable,
-    ];
+        const id = registration.id ?
+          `${extension.sanitizedExtensionId}-${registration.id}`
+          : extension.sanitizedExtensionId;
+
+        return getInjectable({
+          id: `${id}-sidebar-item`,
+          instantiate: () => ({
+            id,
+            orderNumber: registration.orderNumber ?? 9999,
+
+            parentId: registration.parentId
+              ? `${extension.sanitizedExtensionId}-${registration.parentId}`
+              : null,
+
+            isVisible,
+
+            title: registration.title,
+            getIcon: registration.components.Icon
+              ? () => <registration.components.Icon />
+              : undefined,
+            ...(targetRoute
+              ? {
+                onClick: () => navigateToRoute(targetRoute),
+
+                isActive: di.inject(
+                  routeIsActiveInjectable,
+                  targetRoute,
+                ),
+              }
+              : { onClick: noop }),
+          }),
+          injectionToken: sidebarItemInjectionToken,
+        });
+      });
+    });
  },

  injectionToken: extensionRegistratorInjectionToken,
@@ -8,7 +8,7 @@ import { observer } from "mobx-react";
 import React from "react";
 import siblingTabsInjectable from "../../routes/sibling-tabs.injectable";
 import { TabLayout } from "./tab-layout-2";
-import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
+import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar";
 import type { StrictReactNode } from "@k8slens/utilities";

 interface SiblingTabLayoutProps {
@@ -6,15 +6,13 @@
 import styles from  "./sidebar-items.module.scss";

 import React from "react";
-import { computed, makeObservable } from "mobx";
-import { cssNames } from "@k8slens/utilities";
 import { observer } from "mobx-react";
 import { NavLink } from "react-router-dom";
 import { Icon } from "@k8slens/icon";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import type { SidebarStorageState } from "./sidebar-storage/sidebar-storage.injectable";
 import sidebarStorageInjectable from "./sidebar-storage/sidebar-storage.injectable";
-import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
+import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar";
 import type { StorageLayer } from "../../utils/storage-helper";

 interface Dependencies {
@@ -25,97 +23,73 @@ export interface SidebarItemProps {
  item: HierarchicalSidebarItem;
 }

-@observer
-class NonInjectedSidebarItem extends React.Component<
-  SidebarItemProps & Dependencies
-> {
-  static displayName = "SidebarItem";
+const NonInjectedSidebarItem = observer((props: SidebarItemProps & Dependencies) => {
+  const { item, sidebarStorage } = props;
+  const id = item.id;
+  const expanded = sidebarStorage.get().expanded[id] ?? false;
+  const isExpandable = item.children.length > 0 && item.children.some(item => item.isVisible.get());
+  const isActive = item.isActive.get();

-  constructor(props: SidebarItemProps & Dependencies) {
-    super(props);
-    makeObservable(this);
-  }
-
-  get id(): string {
-    return this.item.id;
-  }
-
-  @computed get expanded(): boolean {
-    return Boolean(this.props.sidebarStorage.get().expanded[this.id]);
-  }
-
-  @computed get isExpandable(): boolean {
-    return this.props.item.children.length > 0;
-  }
-
-  @computed get isActive(): boolean {
-    return this.props.item.isActive.get();
-  }
-
-  get item() {
-    return this.props.item;
-  }
-
-  toggleExpand = () => {
-    this.props.sidebarStorage.merge((draft) => {
-      draft.expanded[this.id] = !draft.expanded[this.id];
+  const toggleExpand = () => {
+    sidebarStorage.merge((draft) => {
+      draft.expanded[id] = !draft.expanded[id];
    });
  };
-
-  renderSubMenu() {
-    const { isExpandable, expanded } = this;
-
+  const renderSubMenu = () => {
    if (!isExpandable || !expanded) {
      return null;
    }

    return (
-      <ul className={cssNames(styles.subMenu, { [styles.active]: this.isActive })}>
-        {this.props.item.children.map(item => <SidebarItem key={item.id} item={item} />)}
-      </ul>
-    );
-  }
-
-  render() {
-    return (
-      <div
-        className={styles.SidebarItem}
-        data-testid={`sidebar-item-${this.id}`}
-        data-is-active-test={this.isActive}
-        data-parent-id-test={this.item.parentId}
-      >
-        <NavLink
-          to={""}
-          isActive={() => this.isActive}
-          className={styles.navItem}
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-
-            if (this.isExpandable) {
-              this.toggleExpand();
-            } else {
-              this.item.onClick();
-            }
-          }}
-          data-testid={`sidebar-item-link-for-${this.id}`}
-        >
-          {this.item.getIcon?.()}
-          <span>{this.item.title}</span>
-          {this.isExpandable && (
-            <Icon
-              className={styles.expandIcon}
-              material={
-                this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"
-              }
-            />
-          )}
-        </NavLink>
-        {this.renderSubMenu()}
+      <div className={styles.subMenu}>
+        {item.children.map((child) => (
+          <SidebarItem key={child.id} item={child} />
+        ))}
      </div>
    );
+  };
+
+  if (!item.isVisible.get()) {
+    return null;
  }
-}
+
+  return (
+    <div
+      className={styles.SidebarItem}
+      data-testid={`sidebar-item-${id}`}
+      data-is-active-test={isActive}
+      data-parent-id-test={item.parentId}
+    >
+      <NavLink
+        to={""}
+        isActive={() => isActive}
+        className={styles.navItem}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+
+          if (isExpandable) {
+            toggleExpand();
+          } else {
+            item.onClick();
+          }
+        }}
+        data-testid={`sidebar-item-link-for-${id}`}
+      >
+        {item.getIcon?.()}
+        <span>{item.title}</span>
+        {isExpandable && (
+          <Icon
+            className={styles.expandIcon}
+            material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+            data-testid={`sidebar-item-expand-icon-for-${id}`}
+          />
+        )}
+      </NavLink>
+      {renderSubMenu()}
+    </div>
+  );
+});

 export const SidebarItem = withInjectables<Dependencies, SidebarItemProps>(NonInjectedSidebarItem, {
  getProps: (di, props) => ({
@@ -123,3 +97,5 @@ export const SidebarItem = withInjectables<Dependencies, SidebarItemProps>(NonIn
    sidebarStorage: di.inject(sidebarStorageInjectable),
  }),
 });
+
+SidebarItem.displayName = "SidebarItem";
@@ -1,80 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable, getInjectionToken } from "@ogre-tools/injectable";
-import type { IComputedValue } from "mobx";
-import { computed } from "mobx";
-import { computedInjectManyInjectable } from "@ogre-tools/injectable-extension-for-mobx";
-import { byOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
-import type { SetRequired } from "type-fest";
-import type { StrictReactNode } from "@k8slens/utilities";
-
-export interface SidebarItemRegistration {
-  id: string;
-  parentId: string | null;
-  title: StrictReactNode;
-  onClick: () => void;
-  getIcon?: () => StrictReactNode;
-  isActive?: IComputedValue<boolean>;
-  isVisible?: IComputedValue<boolean>;
-  orderNumber: number;
-}
-
-export const sidebarItemsInjectionToken = getInjectionToken<
-  IComputedValue<SidebarItemRegistration[]>
->({ id: "sidebar-items-injection-token" });
-
-export interface HierarchicalSidebarItem extends SetRequired<SidebarItemRegistration, "isActive" | "isVisible"> {
-  children: HierarchicalSidebarItem[];
-}
-
-const sidebarItemsInjectable = getInjectable({
-  id: "sidebar-items",
-
-  instantiate: (di) => {
-    const computedInjectMany = di.inject(computedInjectManyInjectable);
-    const sidebarItemRegistrations = computedInjectMany(sidebarItemsInjectionToken);
-
-    return computed((): HierarchicalSidebarItem[] => {
-      const registrations = sidebarItemRegistrations
-        .get()
-        .flatMap(reg => reg.get());
-
-      const getSidebarItemsHierarchy = (registrations: SidebarItemRegistration[]) => {
-        const impl = (parentId: string | null): HierarchicalSidebarItem[] => (
-          registrations
-            .filter((item) => item.parentId === parentId)
-            .map(({
-              isActive = computed(() => false),
-              isVisible = computed(() => true),
-              ...registration
-            }) => {
-              const children = impl(registration.id);
-
-              return {
-                ...registration,
-                children,
-                isVisible,
-                isActive: computed(() => {
-                  if (children.length === 0) {
-                    return isActive.get();
-                  }
-
-                  return children.some(child => child.isActive.get());
-                }),
-              };
-            })
-            .filter(({ isVisible }) => isVisible.get())
-            .sort(byOrderNumber)
-        );
-
-        return impl(null);
-      };
-
-      return getSidebarItemsHierarchy(registrations);
-    });
-  },
-});
-
-export default sidebarItemsInjectable;
@@ -12,8 +12,8 @@ import { SidebarItem } from "./sidebar-item";
 import type { CatalogEntityRegistry } from "../../api/catalog/entity/registry";
 import { SidebarCluster } from "./sidebar-cluster";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
-import sidebarItemsInjectable from "./sidebar-items.injectable";
+import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar";
+import { sidebarItemsInjectable } from "@k8slens/cluster-sidebar";
 import type { IComputedValue } from "mobx";
 import catalogEntityRegistryInjectable from "../../api/catalog/entity/registry.injectable";

@@ -11,7 +11,7 @@ import type { StrictReactNode } from "@k8slens/utilities";
 import { cssNames } from "@k8slens/utilities";
 import { Tab, Tabs } from "../tabs";
 import { ErrorBoundary } from "@k8slens/error-boundary";
-import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
+import type { HierarchicalSidebarItem } from "@k8slens/cluster-sidebar";

 export interface TabLayoutProps {
  tabs?: HierarchicalSidebarItem[];
@@ -3,41 +3,32 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import React from "react";
 import namespacesRouteInjectable from "../../../common/front-end-routing/routes/cluster/namespaces/namespaces-route.injectable";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToNamespacesInjectable from "../../../common/front-end-routing/routes/cluster/namespaces/navigate-to-namespaces.injectable";

-const namespacesSidebarItemsInjectable = getInjectable({
-  id: "namespaces",
+const namespacesSidebarItemInjectable = getInjectable({
+  id: "namespaces-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(namespacesRouteInjectable);
-    const navigateToNamespaces = di.inject(navigateToNamespacesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "namespaces",
-        parentId: null,
-        getIcon: () => <Icon material="layers" />,
-        title: "Namespaces",
-        onClick: navigateToNamespaces,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 70,
-      },
-    ]);
+    return {
+      id: "namespaces",
+      parentId: null,
+      getIcon: () => <Icon material="layers" />,
+      title: "Namespaces",
+      onClick: di.inject(navigateToNamespacesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 70,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default namespacesSidebarItemsInjectable;
+export default namespacesSidebarItemInjectable;
@@ -3,35 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
 import endpointsRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/endpoints/endpoints-route.injectable";
-import { networkSidebarItemId } from "../network/network-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToEndpointsInjectable from "../../../common/front-end-routing/routes/cluster/network/endpoints/navigate-to-endpoints.injectable";

-const endpointsSidebarItemsInjectable = getInjectable({
-  id: "endpoints-sidebar-items",
+const endpointsSidebarItemInjectable = getInjectable({
+  id: "endpoints-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(endpointsRouteInjectable);
-    const navigateToEndpoints = di.inject(navigateToEndpointsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "endpoints",
-        parentId: networkSidebarItemId,
-        title: "Endpoints",
-        onClick: navigateToEndpoints,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "endpoints",
+      parentId: di.inject(networkSidebarItemInjectable).id,
+      title: "Endpoints",
+      onClick: di.inject(navigateToEndpointsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default endpointsSidebarItemsInjectable;
+export default endpointsSidebarItemInjectable;
@@ -3,18 +3,15 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import {
-  routeSpecificComponentInjectionToken,
-} from "../../routes/route-specific-component-injection-token";
-import ingressClassesesRouteInjectable
-  from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable";
+import { routeSpecificComponentInjectionToken } from "../../routes/route-specific-component-injection-token";
+import ingressClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable";
 import { IngressClasses } from "./ingress-classes";

 const ingressClassesRouteComponentInjectable = getInjectable({
  id: "ingress-classes-route-component",

  instantiate: (di) => ({
-    route: di.inject(ingressClassesesRouteInjectable),
+    route: di.inject(ingressClassesRouteInjectable),
    Component: IngressClasses,
  }),

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import { getInjectable } from "@ogre-tools/injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable";
+import navigateToIngressClassesInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable";
+import ingressClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classes-route.injectable";
+
+const ingressClassesSidebarItemInjectable = getInjectable({
+  id: "ingress-classes-sidebar-item",
+  instantiate: (di) => {
+    const ingressClassRoute = di.inject(ingressClassesRouteInjectable);
+
+    return {
+      id: "ingressclasses",
+      parentId: di.inject(networkSidebarItemInjectable).id,
+      title: "Ingress Classes",
+      onClick: di.inject(navigateToIngressClassesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, ingressClassRoute),
+      isVisible: ingressClassRoute.isEnabled,
+      orderNumber: 31,
+    };
+  },
+  injectionToken: sidebarItemInjectionToken,
+});
+
+export default ingressClassesSidebarItemInjectable;
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
+import { getInjectable } from "@ogre-tools/injectable";
+import navigateToIngressesInjectable from "../../../common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable";
+import ingressesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/ingresses/ingresses-route.injectable";
+import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
+import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable";
+
+const ingressesSidebarItemInjectable = getInjectable({
+  id: "ingresses-sidebar-item",
+  instantiate: (di) => {
+    const ingressRoute = di.inject(ingressesRouteInjectable);
+
+    return {
+      id: "ingresses",
+      parentId: di.inject(networkSidebarItemInjectable).id,
+      title: "Ingresses",
+      onClick: di.inject(navigateToIngressesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, ingressRoute),
+      isVisible: ingressRoute.isEnabled,
+      orderNumber: 30,
+    };
+  },
+  injectionToken: sidebarItemInjectionToken,
+});
+
+export default ingressesSidebarItemInjectable;
@@ -1,56 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import type { IComputedValue } from "mobx";
-import { computed } from "mobx";
-import ingressesRouteInjectable
-  from "../../../common/front-end-routing/routes/cluster/network/ingresses/ingresses-route.injectable";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
-import { networkSidebarItemId } from "../network/network-sidebar-items.injectable";
-import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
-import navigateToIngressesInjectable
-  from "../../../common/front-end-routing/routes/cluster/network/ingresses/navigate-to-ingresses.injectable";
-import ingressClassesesRouteInjectable
-  from "../../../common/front-end-routing/routes/cluster/network/ingress-class/ingress-classeses-route.injectable";
-import navigateToIngressClassesInjectable
-  from "../../../common/front-end-routing/routes/cluster/network/ingress-class/navigate-to-ingress-classes.injectable";
-
-const ingressesSidebarItemsInjectable = getInjectable({
-  id: "ingresses-sidebar-items",
-
-  instantiate: (di): IComputedValue<SidebarItemRegistration[]> => {
-    const ingressRoute = di.inject(ingressesRouteInjectable);
-    const ingressClassRoute = di.inject(ingressClassesesRouteInjectable);
-
-    return computed(() => [
-      {
-        id: "ingresses",
-        parentId: networkSidebarItemId,
-        title: "Ingresses",
-        onClick: di.inject(navigateToIngressesInjectable),
-        isActive: di.inject(routeIsActiveInjectable, ingressRoute),
-        isVisible: ingressRoute.isEnabled,
-        orderNumber: 30,
-      },
-      {
-        id: "ingressclasses",
-        parentId: networkSidebarItemId,
-        title: "Ingress Classes",
-        onClick: di.inject(navigateToIngressClassesInjectable),
-        isActive: di.inject(routeIsActiveInjectable, ingressClassRoute),
-        isVisible: ingressClassRoute.isEnabled,
-        orderNumber: 31,
-      },
-    ]);
-  },
-
-  injectionToken: sidebarItemsInjectionToken,
-});
-
-export default ingressesSidebarItemsInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import networkPoliciesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/network-policies/network-policies-route.injectable";
-import { networkSidebarItemId } from "../network/network-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToNetworkPoliciesInjectable from "../../../common/front-end-routing/routes/cluster/network/network-policies/navigate-to-network-policies.injectable";

-const networkPoliciesSidebarItemsInjectable = getInjectable({
-  id: "network-policies-sidebar-items",
+const networkPoliciesSidebarItemInjectable = getInjectable({
+  id: "network-policies-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(networkPoliciesRouteInjectable);
-    const navigateToNetworkPolicies = di.inject(navigateToNetworkPoliciesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "network-policies",
-        parentId: networkSidebarItemId,
-        title: "Network Policies",
-        onClick: navigateToNetworkPolicies,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 40,
-      },
-    ]);
+    return {
+      id: "network-policies",
+      parentId: di.inject(networkSidebarItemInjectable).id,
+      title: "Network Policies",
+      onClick: di.inject(navigateToNetworkPoliciesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 40,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default networkPoliciesSidebarItemsInjectable;
+export default networkPoliciesSidebarItemInjectable;
@@ -3,37 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import portForwardsRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/port-forwards-route.injectable";
-import { networkSidebarItemId } from "../network/network-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPortForwardsInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";

-const portForwardsSidebarItemsInjectable = getInjectable({
-  id: "port-forwards-sidebar-items",
+const portForwardsSidebarItemInjectable = getInjectable({
+  id: "port-forwards-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(portForwardsRouteInjectable);
-    const navigateToPortForwards = di.inject(navigateToPortForwardsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "port-forwards",
-        parentId: networkSidebarItemId,
-
-        title: "Port Forwarding",
-        onClick: navigateToPortForwards,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 50,
-      },
-    ]);
+    return {
+      id: "port-forwards",
+      parentId: di.inject(networkSidebarItemInjectable).id,
+      title: "Port Forwarding",
+      onClick: di.inject(navigateToPortForwardsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 50,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default portForwardsSidebarItemsInjectable;
+export default portForwardsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import servicesRouteInjectable from "../../../common/front-end-routing/routes/cluster/network/services/services-route.injectable";
-import { networkSidebarItemId } from "../network/network-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import networkSidebarItemInjectable from "../network/network-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToServicesInjectable from "../../../common/front-end-routing/routes/cluster/network/services/navigate-to-services.injectable";

-const servicesSidebarItemsInjectable = getInjectable({
-  id: "services-sidebar-items",
+const servicesSidebarItemInjectable = getInjectable({
+  id: "services-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(servicesRouteInjectable);
-    const navigateToServices = di.inject(navigateToServicesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "services",
-        parentId: networkSidebarItemId,
-        title: "Services",
-        onClick: navigateToServices,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "services",
+      parentId: di.inject(networkSidebarItemInjectable).id,
+      title: "Services",
+      onClick: di.inject(navigateToServicesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default servicesSidebarItemsInjectable;
+export default servicesSidebarItemInjectable;
@@ -3,34 +3,24 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import React from "react";
 import { noop } from "lodash/fp";

-export const networkSidebarItemId = "network";
+const networkSidebarItemInjectable = getInjectable({
+  id: "network-sidebar-item",

-const networkSidebarItemsInjectable = getInjectable({
-  id: "network-sidebar-items",
+  instantiate: () => ({
+    id: "network",
+    parentId: null,
+    getIcon: () => <Icon material="device_hub" />,
+    title: "Network",
+    onClick: noop,
+    orderNumber: 50,
+  }),

-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: networkSidebarItemId,
-        parentId: null,
-        getIcon: () => <Icon material="device_hub" />,
-        title: "Network",
-        onClick: noop,
-        orderNumber: 50,
-      },
-    ]),
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default networkSidebarItemsInjectable;
+export default networkSidebarItemInjectable;
@@ -3,12 +3,7 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import React from "react";

@@ -16,29 +11,25 @@ import nodesRouteInjectable from "../../../common/front-end-routing/routes/clust
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToNodesInjectable from "../../../common/front-end-routing/routes/cluster/nodes/navigate-to-nodes.injectable";

-const nodesSidebarItemsInjectable = getInjectable({
-  id: "nodes-sidebar-items",
+const nodesSidebarItemInjectable = getInjectable({
+  id: "nodes-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(nodesRouteInjectable);
-    const navigateToNodes = di.inject(navigateToNodesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed((): SidebarItemRegistration[] => [
-      {
-        id: "nodes",
-        parentId: null,
-        getIcon: () => <Icon svg="nodes" />,
-        title: "Nodes",
-        onClick: navigateToNodes,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "nodes",
+      parentId: null,
+      getIcon: () => <Icon svg="nodes" />,
+      title: "Nodes",
+      onClick: di.inject(navigateToNodesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default nodesSidebarItemsInjectable;
+export default nodesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import podSecurityPoliciesRouteInjectable from "../../../common/front-end-routing/routes/cluster/user-management/pod-security-policies/pod-security-policies-route.injectable";
-import { userManagementSidebarItemId } from "../user-management/user-management-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPodSecurityPoliciesInjectable from "../../../common/front-end-routing/routes/cluster/user-management/pod-security-policies/navigate-to-pod-security-policies.injectable";
+import userManagementSidebarItemInjectable from "../user-management/user-management-sidebar-items.injectable";

-const podSecurityPoliciesSidebarItemsInjectable = getInjectable({
-  id: "pod-security-policies-sidebar-items",
+const podSecurityPoliciesSidebarItemInjectable = getInjectable({
+  id: "pod-security-policies-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(podSecurityPoliciesRouteInjectable);
-    const navigateToPodSecurityPolicies = di.inject(navigateToPodSecurityPoliciesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "pod-security-policies",
-        parentId: userManagementSidebarItemId,
-        title: "Pod Security Policies",
-        onClick: navigateToPodSecurityPolicies,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 60,
-      },
-    ]);
+    return {
+      id: "pod-security-policies",
+      parentId: di.inject(userManagementSidebarItemInjectable).id,
+      title: "Pod Security Policies",
+      onClick: di.inject(navigateToPodSecurityPoliciesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 60,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default podSecurityPoliciesSidebarItemsInjectable;
+export default podSecurityPoliciesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import storageClassesRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/storage-classes/storage-classes-route.injectable";
-import { storageSidebarItemId } from "../storage/storage-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import storageSidebarItemInjectable from "../storage/storage-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToStorageClassesInjectable from "../../../common/front-end-routing/routes/cluster/storage/storage-classes/navigate-to-storage-classes.injectable";

-const storageClassesSidebarItemsInjectable = getInjectable({
-  id: "storage-classes-sidebar-items",
+const storageClassesSidebarItemInjectable = getInjectable({
+  id: "storage-classes-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(storageClassesRouteInjectable);
-    const navigateToStorageClasses = di.inject(navigateToStorageClassesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "storage-classes",
-        parentId: storageSidebarItemId,
-        title: "Storage Classes",
-        onClick: navigateToStorageClasses,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 30,
-      },
-    ]);
+    return {
+      id: "storage-classes",
+      parentId: di.inject(storageSidebarItemInjectable).id,
+      title: "Storage Classes",
+      onClick: di.inject(navigateToStorageClassesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 30,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default storageClassesSidebarItemsInjectable;
+export default storageClassesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import persistentVolumeClaimsRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/persistent-volume-claims-route.injectable";
-import { storageSidebarItemId } from "../storage/storage-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import storageSidebarItemInjectable from "../storage/storage-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPersistentVolumeClaimsInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volume-claims/navigate-to-persistent-volume-claims.injectable";

-const persistentVolumeClaimsSidebarItemsInjectable = getInjectable({
-  id: "persistent-volume-claims-sidebar-items",
+const persistentVolumeClaimsSidebarItemInjectable = getInjectable({
+  id: "persistent-volume-claims-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(persistentVolumeClaimsRouteInjectable);
-    const navigateToPersistentVolumeClaims = di.inject(navigateToPersistentVolumeClaimsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "persistent-volume-claims",
-        parentId: storageSidebarItemId,
-        title: "Persistent Volume Claims",
-        onClick: navigateToPersistentVolumeClaims,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "persistent-volume-claims",
+      parentId: di.inject(storageSidebarItemInjectable).id,
+      title: "Persistent Volume Claims",
+      onClick: di.inject(navigateToPersistentVolumeClaimsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default persistentVolumeClaimsSidebarItemsInjectable;
+export default persistentVolumeClaimsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import persistentVolumesRouteInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volumes/persistent-volumes-route.injectable";
-import { storageSidebarItemId } from "../storage/storage-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import storageSidebarItemInjectable from "../storage/storage-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPersistentVolumesInjectable from "../../../common/front-end-routing/routes/cluster/storage/persistent-volumes/navigate-to-persistent-volumes.injectable";

-const persistentVolumesSidebarItemsInjectable = getInjectable({
-  id: "persistent-volumes-sidebar-items",
+const persistentVolumesSidebarItemInjectable = getInjectable({
+  id: "persistent-volumes-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(persistentVolumesRouteInjectable);
-    const navigateToPersistentVolumes = di.inject(navigateToPersistentVolumesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "persistent-volumes",
-        parentId: storageSidebarItemId,
-        title: "Persistent Volumes",
-        onClick: navigateToPersistentVolumes,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "persistent-volumes",
+      parentId: di.inject(storageSidebarItemInjectable).id,
+      title: "Persistent Volumes",
+      onClick: di.inject(navigateToPersistentVolumesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default persistentVolumesSidebarItemsInjectable;
+export default persistentVolumesSidebarItemInjectable;
@@ -3,34 +3,24 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import React from "react";
 import { noop } from "lodash/fp";

-export const storageSidebarItemId = "storage";
+const storageSidebarItemInjectable = getInjectable({
+  id: "storage-sidebar-item",

-const storageSidebarItemsInjectable = getInjectable({
-  id: "storage-sidebar-items",
+  instantiate: () => ({
+    id: "storage",
+    parentId: null,
+    getIcon: () => <Icon material="storage" />,
+    title: "Storage",
+    onClick: noop,
+    orderNumber: 60,
+  }),

-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: storageSidebarItemId,
-        parentId: null,
-        getIcon: () => <Icon material="storage" />,
-        title: "Storage",
-        onClick: noop,
-        orderNumber: 60,
-      },
-    ]),
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default storageSidebarItemsInjectable;
+export default storageSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import clusterRoleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/cluster-role-bindings-route.injectable";
-import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
 import navigateToClusterRoleBindingsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-role-bindings/navigate-to-cluster-role-bindings.injectable";
+import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable";

-const clusterRoleBindingsSidebarItemsInjectable = getInjectable({
-  id: "cluster-role-bindings-sidebar-items",
+const clusterRoleBindingsSidebarItemInjectable = getInjectable({
+  id: "cluster-role-bindings-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(clusterRoleBindingsRouteInjectable);
-    const navigateToClusterRoleBindings = di.inject(navigateToClusterRoleBindingsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "cluster-role-bindings",
-        parentId: userManagementSidebarItemId,
-        title: "Cluster Role Bindings",
-        onClick: navigateToClusterRoleBindings,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 40,
-      },
-    ]);
+    return {
+      id: "cluster-role-bindings",
+      parentId: di.inject(userManagementSidebarItemInjectable).id,
+      title: "Cluster Role Bindings",
+      onClick: di.inject(navigateToClusterRoleBindingsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 40,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default clusterRoleBindingsSidebarItemsInjectable;
+export default clusterRoleBindingsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import clusterRolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/cluster-roles-route.injectable";
-import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
 import navigateToClusterRolesInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/cluster-roles/navigate-to-cluster-roles.injectable";

-const clusterRolesSidebarItemsInjectable = getInjectable({
-  id: "cluster-roles-sidebar-items",
+const clusterRolesSidebarItemInjectable = getInjectable({
+  id: "cluster-roles-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(clusterRolesRouteInjectable);
-    const navigateToClusterRoles = di.inject(navigateToClusterRolesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "cluster-roles",
-        parentId: userManagementSidebarItemId,
-        title: "Cluster Roles",
-        onClick: navigateToClusterRoles,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "cluster-roles",
+      parentId: di.inject(userManagementSidebarItemInjectable).id,
+      title: "Cluster Roles",
+      onClick: di.inject(navigateToClusterRolesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default clusterRolesSidebarItemsInjectable;
+export default clusterRolesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import roleBindingsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/role-bindings-route.injectable";
-import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
 import navigateToRoleBindingsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/role-bindings/navigate-to-role-bindings.injectable";

-const roleBindingsSidebarItemsInjectable = getInjectable({
-  id: "role-bindings-sidebar-items",
+const roleBindingsSidebarItemInjectable = getInjectable({
+  id: "role-bindings-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(roleBindingsRouteInjectable);
-    const navigateToRoleBindings = di.inject(navigateToRoleBindingsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "role-bindings",
-        parentId: userManagementSidebarItemId,
-        title: "Role Bindings",
-        onClick: navigateToRoleBindings,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 50,
-      },
-    ]);
+    return {
+      id: "role-bindings",
+      parentId: di.inject(userManagementSidebarItemInjectable).id,
+      title: "Role Bindings",
+      onClick: di.inject(navigateToRoleBindingsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 50,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default roleBindingsSidebarItemsInjectable;
+export default roleBindingsSidebarItemInjectable;
@@ -3,36 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-
 import rolesRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/roles-route.injectable";
-import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
 import navigateToRolesInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/roles/navigate-to-roles.injectable";

-const rolesSidebarItemsInjectable = getInjectable({
-  id: "roles-sidebar-items",
+const rolesSidebarItemInjectable = getInjectable({
+  id: "roles-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(rolesRouteInjectable);
-    const navigateToRoles = di.inject(navigateToRolesInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "roles",
-        parentId: userManagementSidebarItemId,
-        title: "Roles",
-        onClick: navigateToRoles,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 30,
-      },
-    ]);
+    return {
+      id: "roles",
+      parentId: di.inject(userManagementSidebarItemInjectable).id,
+      title: "Roles",
+      onClick: di.inject(navigateToRolesInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 30,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default rolesSidebarItemsInjectable;
+export default rolesSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import serviceAccountsRouteInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/service-accounts-route.injectable";
-import { userManagementSidebarItemId } from "../user-management-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../../layout/sidebar-items.injectable";
+import userManagementSidebarItemInjectable from "../user-management-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../../routes/route-is-active.injectable";
 import navigateToServiceAccountsInjectable from "../../../../common/front-end-routing/routes/cluster/user-management/service-accounts/navigate-to-service-accounts.injectable";

-const serviceAccountsSidebarItemsInjectable = getInjectable({
-  id: "service-accounts-sidebar-items",
+const serviceAccountsSidebarItemInjectable = getInjectable({
+  id: "service-accounts-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(serviceAccountsRouteInjectable);
-    const navigateToServiceAccounts = di.inject(navigateToServiceAccountsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "service-accounts",
-        parentId: userManagementSidebarItemId,
-        title: "Service Accounts",
-        onClick: navigateToServiceAccounts,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "service-accounts",
+      parentId: di.inject(userManagementSidebarItemInjectable).id,
+      title: "Service Accounts",
+      onClick: di.inject(navigateToServiceAccountsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default serviceAccountsSidebarItemsInjectable;
+export default serviceAccountsSidebarItemInjectable;
@@ -3,34 +3,24 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import React from "react";
 import { noop } from "lodash/fp";

-export const userManagementSidebarItemId = "user-management";
+const userManagementSidebarItemInjectable = getInjectable({
+  id: "user-management-sidebar-item",

-const userManagementSidebarItemsInjectable = getInjectable({
-  id: "user-management-sidebar-items",
+  instantiate: () => ({
+    id: "user-management",
+    parentId: null,
+    getIcon: () => <Icon material="security" />,
+    title: "Access Control",
+    onClick: noop,
+    orderNumber: 100,
+  }),

-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: userManagementSidebarItemId,
-        parentId: null,
-        getIcon: () => <Icon material="security" />,
-        title: "Access Control",
-        onClick: noop,
-        orderNumber: 100,
-      },
-    ]),
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default userManagementSidebarItemsInjectable;
+export default userManagementSidebarItemInjectable;
@@ -3,36 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-
 import cronJobsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/cron-jobs-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToCronJobsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/cron-jobs/navigate-to-cron-jobs.injectable";

-const cronJobsSidebarItemsInjectable = getInjectable({
-  id: "cron-jobs-sidebar-items",
+const cronJobsSidebarItemInjectable = getInjectable({
+  id: "cron-jobs-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(cronJobsRouteInjectable);
-    const navigateToCronJobs = di.inject(navigateToCronJobsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "cron-jobs",
-        parentId: workloadsSidebarItemId,
-        title: "CronJobs",
-        onClick: navigateToCronJobs,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 80,
-      },
-    ]);
+    return {
+      id: "cron-jobs",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "CronJobs",
+      onClick: di.inject(navigateToCronJobsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 80,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default cronJobsSidebarItemsInjectable;
+export default cronJobsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import daemonsetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/daemonsets/daemonsets-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToDaemonsetsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/daemonsets/navigate-to-daemonsets.injectable";

-const daemonsetsSidebarItemsInjectable = getInjectable({
-  id: "daemonsets-sidebar-items",
+const daemonsetsSidebarItemInjectable = getInjectable({
+  id: "daemonsets-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(daemonsetsRouteInjectable);
-    const navigateToDaemonsets = di.inject(navigateToDaemonsetsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "daemon-sets",
-        parentId: workloadsSidebarItemId,
-        title: "DaemonSets",
-        onClick: () => navigateToDaemonsets(),
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 40,
-      },
-    ]);
+    return {
+      id: "daemon-sets",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "DaemonSets",
+      onClick: di.inject(navigateToDaemonsetsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 40,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default daemonsetsSidebarItemsInjectable;
+export default daemonsetsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import deploymentsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/deployments/deployments-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToDeploymentsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/deployments/navigate-to-deployments.injectable";

-const deploymentsSidebarItemsInjectable = getInjectable({
-  id: "deployments-sidebar-items",
+const deploymentsSidebarItemInjectable = getInjectable({
+  id: "deployments-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(deploymentsRouteInjectable);
-    const navigateToDeployments = di.inject(navigateToDeploymentsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "deployments",
-        parentId: workloadsSidebarItemId,
-        title: "Deployments",
-        onClick: navigateToDeployments,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 30,
-      },
-    ]);
+    return {
+      id: "deployments",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "Deployments",
+      onClick: di.inject(navigateToDeploymentsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 30,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default deploymentsSidebarItemsInjectable;
+export default deploymentsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import jobsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/jobs/jobs-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToJobsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/jobs/navigate-to-jobs.injectable";

-const jobsSidebarItemsInjectable = getInjectable({
-  id: "jobs-sidebar-items",
+const jobsSidebarItemInjectable = getInjectable({
+  id: "jobs-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(jobsRouteInjectable);
-    const navigateToJobs = di.inject(navigateToJobsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "jobs",
-        parentId: workloadsSidebarItemId,
-        title: "Jobs",
-        onClick: navigateToJobs,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 70,
-      },
-    ]);
+    return {
+      id: "jobs",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "Jobs",
+      onClick: di.inject(navigateToJobsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 70,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default jobsSidebarItemsInjectable;
+export default jobsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import workloadsOverviewRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/overview/workloads-overview-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToWorkloadsOverviewInjectable from "../../../common/front-end-routing/routes/cluster/workloads/overview/navigate-to-workloads-overview.injectable";

-const workloadsOverviewSidebarItemsInjectable = getInjectable({
-  id: "workloads-overview-sidebar-items",
+const workloadsOverviewSidebarItemInjectable = getInjectable({
+  id: "workloads-overview-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(workloadsOverviewRouteInjectable);
-    const navigateToWorkloadsOverview = di.inject(navigateToWorkloadsOverviewInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "overview",
-        parentId: workloadsSidebarItemId,
-        title: "Overview",
-        onClick: navigateToWorkloadsOverview,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 10,
-      },
-    ]);
+    return {
+      id: "overview",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "Overview",
+      onClick: di.inject(navigateToWorkloadsOverviewInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 10,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default workloadsOverviewSidebarItemsInjectable;
+export default workloadsOverviewSidebarItemInjectable;
@@ -5,7 +5,7 @@
 import { getInjectable } from "@ogre-tools/injectable";
 import { computed } from "mobx";
 import { shouldShowResourceInjectionToken } from "../../../../features/cluster/showing-kube-resources/common/allowed-resources-injection-token";
-import { byOrderNumber } from "../../../../common/utils/composable-responsibilities/orderable/orderable";
+import { byOrderNumber } from "@k8slens/utilities";
 import { workloadInjectionToken } from "./workload-injection-token";

 const workloadsInjectable = getInjectable({
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import podsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/pods-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToPodsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/pods/navigate-to-pods.injectable";

-const podsSidebarItemsInjectable = getInjectable({
-  id: "pods-sidebar-items",
+const podsSidebarItemInjectable = getInjectable({
+  id: "pods-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(podsRouteInjectable);
-    const navigateToPods = di.inject(navigateToPodsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "pods",
-        parentId: workloadsSidebarItemId,
-        title: "Pods",
-        onClick: navigateToPods,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 20,
-      },
-    ]);
+    return {
+      id: "pods",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "Pods",
+      onClick: di.inject(navigateToPodsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 20,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default podsSidebarItemsInjectable;
+export default podsSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import replicasetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replicasets/replicasets-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToReplicasetsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replicasets/navigate-to-replicasets.injectable";

-const replicasetsSidebarItemsInjectable = getInjectable({
-  id: "replicasets-sidebar-items",
+const replicasetsSidebarItemInjectable = getInjectable({
+  id: "replicasets-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(replicasetsRouteInjectable);
-    const navigateToReplicasets = di.inject(navigateToReplicasetsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "replica-sets",
-        parentId: workloadsSidebarItemId,
-        title: "ReplicaSets",
-        onClick: navigateToReplicasets,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 60,
-      },
-    ]);
+    return {
+      id: "replica-sets",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "ReplicaSets",
+      onClick: di.inject(navigateToReplicasetsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 60,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default replicasetsSidebarItemsInjectable;
+export default replicasetsSidebarItemInjectable;
@@ -3,35 +3,30 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import replicationControllersRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replication-controllers/route.injectable";
 import navigateToReplicationControllersInjectable from "../../../common/front-end-routing/routes/cluster/workloads/replication-controllers/navigate-to.injectable";

-const replicationControllerSidebarItemsInjectable = getInjectable({
-  id: "replication-controller-sidebar-items",
+const replicationControllerSidebarItemInjectable = getInjectable({
+  id: "replication-controller-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(replicationControllersRouteInjectable);
-    const navigateToPage = di.inject(navigateToReplicationControllersInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "replication-controllers",
-        parentId: workloadsSidebarItemId,
-        title: "Replication Controllers",
-        onClick: navigateToPage,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 61,
-      },
-    ]);
+    return {
+      id: "replication-controllers",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "Replication Controllers",
+      onClick: di.inject(navigateToReplicationControllersInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 61,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default replicationControllerSidebarItemsInjectable;
+export default replicationControllerSidebarItemInjectable;
@@ -3,36 +3,31 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";

 import statefulsetsRouteInjectable from "../../../common/front-end-routing/routes/cluster/workloads/statefulsets/statefulsets-route.injectable";
-import { workloadsSidebarItemId } from "../workloads/workloads-sidebar-items.injectable";
-import { sidebarItemsInjectionToken } from "../layout/sidebar-items.injectable";
+import workloadsSidebarItemInjectable from "../workloads/workloads-sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import routeIsActiveInjectable from "../../routes/route-is-active.injectable";
 import navigateToStatefulsetsInjectable from "../../../common/front-end-routing/routes/cluster/workloads/statefulsets/navigate-to-statefulsets.injectable";

-const statefulsetsSidebarItemsInjectable = getInjectable({
-  id: "statefulsets-sidebar-items",
+const statefulsetsSidebarItemInjectable = getInjectable({
+  id: "statefulsets-sidebar-item",

  instantiate: (di) => {
    const route = di.inject(statefulsetsRouteInjectable);
-    const navigateToStatefulsets = di.inject(navigateToStatefulsetsInjectable);
-    const routeIsActive = di.inject(routeIsActiveInjectable, route);

-    return computed(() => [
-      {
-        id: "stateful-sets",
-        parentId: workloadsSidebarItemId,
-        title: "StatefulSets",
-        onClick: navigateToStatefulsets,
-        isActive: routeIsActive,
-        isVisible: route.isEnabled,
-        orderNumber: 50,
-      },
-    ]);
+    return {
+      id: "stateful-sets",
+      parentId: di.inject(workloadsSidebarItemInjectable).id,
+      title: "StatefulSets",
+      onClick: di.inject(navigateToStatefulsetsInjectable),
+      isActive: di.inject(routeIsActiveInjectable, route),
+      isVisible: route.isEnabled,
+      orderNumber: 50,
+    };
  },

-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default statefulsetsSidebarItemsInjectable;
+export default statefulsetsSidebarItemInjectable;
@@ -3,34 +3,24 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import { computed } from "mobx";
-import type {
-  SidebarItemRegistration } from "../layout/sidebar-items.injectable";
-import {
-  sidebarItemsInjectionToken,
-} from "../layout/sidebar-items.injectable";
+import { sidebarItemInjectionToken } from "@k8slens/cluster-sidebar";
 import { Icon } from "@k8slens/icon";
 import React from "react";
 import { noop } from "lodash/fp";

-export const workloadsSidebarItemId = "workloads";
+const workloadsSidebarItemInjectable = getInjectable({
+  id: "workloads-sidebar-item",

-const workloadsSidebarItemsInjectable = getInjectable({
-  id: "workloads-sidebar-items",
+  instantiate: () => ({
+    id: "workloads",
+    parentId: null,
+    title: "Workloads",
+    getIcon: () => <Icon svg="workloads" />,
+    onClick: noop,
+    orderNumber: 20,
+  }),

-  instantiate: () =>
-    computed((): SidebarItemRegistration[] => [
-      {
-        id: workloadsSidebarItemId,
-        parentId: null,
-        title: "Workloads",
-        getIcon: () => <Icon svg="workloads" />,
-        onClick: noop,
-        orderNumber: 20,
-      },
-    ]),
-
-  injectionToken: sidebarItemsInjectionToken,
+  injectionToken: sidebarItemInjectionToken,
 });

-export default workloadsSidebarItemsInjectable;
+export default workloadsSidebarItemInjectable;
@@ -21,6 +21,7 @@ import { registerFeature } from "@k8slens/feature-core";
 import { messagingFeature, testUtils as messagingTestUtils } from "@k8slens/messaging";
 import { routingFeature } from "@k8slens/routing";
 import { loggerFeature } from "@k8slens/logger";
+import { clusterSidebarFeature } from "@k8slens/cluster-sidebar";

 export const getDiForUnitTesting = () => {
  const environment = "renderer";
@@ -39,6 +40,7 @@ export const getDiForUnitTesting = () => {
      routingFeature,
      loggerFeature,
      animateFeature,
+      clusterSidebarFeature,
    );
  });

@@ -4,7 +4,7 @@
 */
 import { computed } from "mobx";
 import { getInjectable } from "@ogre-tools/injectable";
-import sidebarItemsInjectable from "../components/layout/sidebar-items.injectable";
+import { sidebarItemsInjectable } from "@k8slens/cluster-sidebar";

 const siblingTabsInjectable = getInjectable({
  id: "sibling-tabs",
@@ -12,11 +12,14 @@ const siblingTabsInjectable = getInjectable({
  instantiate: (di) => {
    const sidebarItems = di.inject(sidebarItemsInjectable);

-    return computed(() => {
-      const item = sidebarItems.get().find(({ isActive }) => isActive.get());
-
-      return item?.children ?? [];
-    });
+    return computed(() => (
+      sidebarItems
+        .get()
+        .find(({ isActive }) => isActive.get())
+        ?.children
+        .filter(({ isVisible }) => isVisible.get())
+        ?? []
+    ));
  },
 });