Persist local-storage in external json-file (#2279)

src/renderer/components/layout/main-layout.scss

@@ -7,7 +7,6 @@
     "aside footer";
   grid-template-rows: [header] var(--main-layout-header) [tabs] min-content [main] 1fr [footer] auto;
   grid-template-columns: [sidebar] minmax(var(--main-layout-header), min-content) [main] 1fr;
-
   height: 100%;
 
   > header {
@@ -22,18 +21,15 @@
     background: $sidebarBackground;
     white-space: nowrap;
     transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    width: var(--sidebar-width);
 
-    &.pinned {
-      width: var(--sidebar-width);
-    }
-
-    &:not(.pinned) {
+    &.compact {
       position: absolute;
       width: var(--main-layout-header);
       height: 100%;
       overflow: hidden;
 
-      &.accessible:hover {
+      &:hover {
         width: var(--sidebar-width);
         transition-delay: 750ms;
         box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);

src/renderer/components/layout/main-layout.tsx

@@ -1,15 +1,15 @@
 import "./main-layout.scss";
 
 import React from "react";
-import { observable, reaction } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { getHostedCluster } from "../../../common/cluster-store";
-import { autobind, createStorage, cssNames } from "../../utils";
+import { cssNames } from "../../utils";
 import { Dock } from "../dock";
 import { ErrorBoundary } from "../error-boundary";
 import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
 import { MainLayoutHeader } from "./main-layout-header";
 import { Sidebar } from "./sidebar";
+import { sidebarStorage } from "./sidebar-storage";
 
 export interface MainLayoutProps {
   className?: any;
@@ -20,65 +20,41 @@ export interface MainLayoutProps {
 
 @observer
 export class MainLayout extends React.Component<MainLayoutProps> {
-  public storage = createStorage("main_layout", {
-    pinnedSidebar: true,
-    sidebarWidth: 200,
-  });
-
-  @observable isPinned = this.storage.get().pinnedSidebar;
-  @observable isAccessible = true;
-  @observable sidebarWidth = this.storage.get().sidebarWidth;
-
-  @disposeOnUnmount syncPinnedStateWithStorage = reaction(
-    () => this.isPinned,
-    (isPinned) => this.storage.merge({ pinnedSidebar: isPinned })
-  );
-
-  @disposeOnUnmount syncWidthStateWithStorage = reaction(
-    () => this.sidebarWidth,
-    (sidebarWidth) => this.storage.merge({ sidebarWidth })
-  );
-
-
-  toggleSidebar = () => {
-    this.isPinned = !this.isPinned;
-    this.isAccessible = false;
-    setTimeout(() => (this.isAccessible = true), 250);
+  onSidebarCompactModeChange = () => {
+    sidebarStorage.merge(draft => {
+      draft.compact = !draft.compact;
+    });
   };
 
-  getSidebarSize = () => {
-    return {
-      "--sidebar-width": `${this.sidebarWidth}px`,
-    };
+  onSidebarResize = (width: number) => {
+    sidebarStorage.merge({ width });
   };
 
-  @autobind()
-  adjustWidth(newWidth: number): void {
-    this.sidebarWidth = newWidth;
-  }
-
   render() {
-    const { className, headerClass, footer, footerClass, children } = this.props;
     const cluster = getHostedCluster();
+    const { onSidebarCompactModeChange, onSidebarResize } = this;
+    const { className, headerClass, footer, footerClass, children } = this.props;
+    const { compact, width: sidebarWidth } = sidebarStorage.get();
+    const style = { "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties;
 
     if (!cluster) {
       return null; // fix: skip render when removing active (visible) cluster
     }
 
     return (
-      <div className={cssNames("MainLayout", className)} style={this.getSidebarSize() as any}>
-        <MainLayoutHeader className={headerClass} cluster={cluster} />
+      <div className={cssNames("MainLayout", className)} style={style}>
+        <MainLayoutHeader className={headerClass} cluster={cluster}/>
 
-        <aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
-          <Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
+        <aside className={cssNames("flex column", { compact })}>
+          <Sidebar className="box grow" compact={compact} toggle={onSidebarCompactModeChange}/>
           <ResizingAnchor
             direction={ResizeDirection.HORIZONTAL}
             placement={ResizeSide.TRAILING}
             growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
-            getCurrentExtent={() => this.sidebarWidth}
-            onDrag={this.adjustWidth}
-            onDoubleClick={this.toggleSidebar}
-            disabled={!this.isPinned}
+            getCurrentExtent={() => sidebarWidth}
+            onDrag={onSidebarResize}
+            onDoubleClick={onSidebarCompactModeChange}
+            disabled={compact}
             minExtent={120}
             maxExtent={400}
           />
@@ -88,7 +64,7 @@ export class MainLayout extends React.Component<MainLayoutProps> {
           <ErrorBoundary>{children}</ErrorBoundary>
         </main>
 
-        <footer className={footerClass}>{footer ?? <Dock />}</footer>
+        <footer className={footerClass}>{footer ?? <Dock/>}</footer>
       </div>
     );
   }

src/renderer/components/layout/sidebar-context.ts

@@ -1,7 +0,0 @@
-import React from "react";
-
-export const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
-
-export type SidebarContextValue = {
-  pinned: boolean;
-};

src/renderer/components/layout/sidebar-item.scss

@@ -0,0 +1,63 @@
+.SidebarItem {
+  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
+
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100%;
+  user-select: none;
+
+  > .nav-item {
+    text-decoration: none;
+    padding: $itemSpacing;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    cursor: pointer;
+
+    > .link-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &.active, &:hover {
+      background: $lensBlue;
+      color: $sidebarActiveColor;
+    }
+
+    .expand-icon {
+      --size: 20px;
+    }
+  }
+
+  .sub-menu {
+    $borderSize: 4px;
+    border-left: $borderSize solid transparent;
+
+    &.active {
+      border-left-color: $lensBlue;
+    }
+
+    > .SidebarItem {
+      color: $textColorPrimary;
+      padding-left: 30px + $borderSize;
+      line-height: 22px;
+
+      .SidebarItem {
+        padding-left: $padding * 2; // 3rd+ menu level
+      }
+
+      .nav-item {
+        &.expandable {
+          font-weight: 500;
+        }
+
+        &.active, &:hover {
+          color: $sidebarSubmenuActiveColor;
+          background: none;
+        }
+      }
+    }
+  }
+}

src/renderer/components/layout/sidebar-item.tsx

@@ -0,0 +1,98 @@
+import "./sidebar-item.scss";
+
+import React from "react";
+import { computed } from "mobx";
+import { cssNames, prevDefault } from "../../utils";
+import { observer } from "mobx-react";
+import { NavLink } from "react-router-dom";
+import { Icon } from "../icon";
+import { TabLayoutRoute } from "./tab-layout";
+import { sidebarStorage } from "./sidebar-storage";
+import { isActiveRoute } from "../../navigation";
+
+interface SidebarItemProps {
+  id: string; // Used to save nav item collapse/expand state in local storage
+  url: string;
+  text: React.ReactNode | string;
+  className?: string;
+  icon?: React.ReactNode;
+  isHidden?: boolean;
+  isActive?: boolean;
+  subMenus?: TabLayoutRoute[];
+}
+
+@observer
+export class SidebarItem extends React.Component<SidebarItemProps> {
+  static displayName = "SidebarItem";
+
+  get id(): string {
+    return this.props.id; // unique id, used in storage and integration tests
+  }
+
+  get compact(): boolean {
+    return Boolean(sidebarStorage.get().compact);
+  }
+
+  get expanded(): boolean {
+    return Boolean(sidebarStorage.get().expanded[this.id]);
+  }
+
+  @computed get isExpandable(): boolean {
+    const { subMenus, children } = this.props;
+    const hasContent = subMenus?.length > 0 || children;
+
+    return Boolean(hasContent && !this.compact) /*not available in compact-mode*/;
+  }
+
+  toggleExpand = () => {
+    sidebarStorage.merge(draft => {
+      draft.expanded[this.id] = !draft.expanded[this.id];
+    });
+  };
+
+  render() {
+    const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props;
+
+    if (isHidden) return null;
+
+    const { id, compact, expanded, isExpandable, toggleExpand } = this;
+    const classNames = cssNames(SidebarItem.displayName, className, {
+      compact,
+    });
+
+    return (
+      <div className={classNames} data-test-id={id}>
+        <NavLink
+          to={url}
+          isActive={() => isActive}
+          className={cssNames("nav-item flex gaps align-center", { expandable: isExpandable })}
+          onClick={isExpandable ? prevDefault(toggleExpand) : undefined}>
+          {icon}
+          <span className="link-text box grow">{text}</span>
+          {isExpandable && <Icon
+            className="expand-icon box right"
+            material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          />}
+        </NavLink>
+        {isExpandable && expanded && (
+          <ul className={cssNames("sub-menu", { active: isActive })}>
+            {subMenus.map(({ title, routePath, url = routePath }) => {
+              const subItemId = `${id}${routePath}`;
+
+              return (
+                <SidebarItem
+                  key={subItemId}
+                  id={subItemId}
+                  url={url}
+                  text={title}
+                  isActive={isActiveRoute({ path: url, exact: true })}
+                />
+              );
+            })}
+            {children}
+          </ul>
+        )}
+      </div>
+    );
+  }
+}

src/renderer/components/layout/sidebar-nav-item.scss

@@ -1,76 +0,0 @@
-.SidebarNavItem {
-  $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
-
-  width: 100%;
-  user-select: none;
-  flex-shrink: 0;
-
-  .nav-item {
-    cursor: pointer;
-    width: inherit;
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    border: none;
-    padding: $itemSpacing;
-
-    &.active, &:hover {
-      background: $lensBlue;
-      color: $sidebarActiveColor;
-    }
-  }
-
-  .expand-icon {
-    --size: 20px;
-  }
-
-  .sub-menu {
-    border-left: 4px solid transparent;
-
-    &.active {
-      border-left-color: $lensBlue;
-    }
-
-    a, .SidebarNavItem {
-      display: block;
-      border: none;
-      text-decoration: none;
-      color: $textColorPrimary;
-      font-weight: normal;
-      padding-left: 40px; // parent icon width
-      overflow: hidden;
-      text-overflow: ellipsis;
-      line-height: 0px; // hidden by default
-      height: 0px;
-      opacity: 0;
-      transition: 125ms line-height ease-out, 200ms 100ms opacity;
-
-      &.visible {
-        line-height: 28px;
-        height: auto;
-        opacity: 1;
-      }
-
-      &.active, &:hover {
-        color: $sidebarSubmenuActiveColor;
-      }
-    }
-
-    .sub-menu-parent {
-      padding-left: 27px;
-      font-weight: 500;
-
-      .nav-item {
-        &:hover {
-          background: transparent;
-        }
-      }
-
-      .sub-menu {
-        a {
-          padding-left: $padding * 3;
-        }
-      }
-    }
-  }
-}

src/renderer/components/layout/sidebar-nav-item.tsx

@@ -1,83 +0,0 @@
-import "./sidebar-nav-item.scss";
-
-import React from "react";
-import { computed, observable, reaction } from "mobx";
-import { observer } from "mobx-react";
-import { NavLink } from "react-router-dom";
-
-import { createStorage, cssNames } from "../../utils";
-import { Icon } from "../icon";
-import { SidebarContext } from "./sidebar-context";
-
-import type { TabLayoutRoute } from "./tab-layout";
-import type { SidebarContextValue } from "./sidebar-context";
-
-interface SidebarNavItemProps {
-  id: string; // Used to save nav item collapse/expand state in local storage
-  url: string;
-  text: React.ReactNode | string;
-  className?: string;
-  icon?: React.ReactNode;
-  isHidden?: boolean;
-  isActive?: boolean;
-  subMenus?: TabLayoutRoute[];
-}
-
-const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
-const navItemState = observable.map<string, boolean>(navItemStorage.get());
-
-reaction(() => [...navItemState], (value) => navItemStorage.set(value));
-
-@observer
-export class SidebarNavItem extends React.Component<SidebarNavItemProps> {
-  static contextType = SidebarContext;
-  public context: SidebarContextValue;
-
-  @computed get isExpanded() {
-    return navItemState.get(this.props.id);
-  }
-
-  toggleSubMenu = () => {
-    navItemState.set(this.props.id, !this.isExpanded);
-  };
-
-  render() {
-    const { isHidden, isActive, subMenus = [], icon, text, url, children, className, id } = this.props;
-
-    if (isHidden) {
-      return null;
-    }
-    const extendedView = (subMenus.length > 0 || children) && this.context.pinned;
-
-    if (extendedView) {
-      return (
-        <div className={cssNames("SidebarNavItem", className)} data-test-id={id}>
-          <div className={cssNames("nav-item", { active: isActive })} onClick={this.toggleSubMenu}>
-            {icon}
-            <span className="link-text">{text}</span>
-            <Icon className="expand-icon" material={this.isExpanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}/>
-          </div>
-          <ul className={cssNames("sub-menu", { active: isActive })}>
-            {subMenus.map(({ title, url }) => (
-              <NavLink key={url} to={url} className={cssNames({ visible: this.isExpanded })}>
-                {title}
-              </NavLink>
-            ))}
-            {React.Children.toArray(children).map((child: React.ReactElement<any>) => {
-              return React.cloneElement(child, {
-                className: cssNames(child.props.className, { visible: this.isExpanded }),
-              });
-            })}
-          </ul>
-        </div>
-      );
-    }
-
-    return (
-      <NavLink className={cssNames("SidebarNavItem", className)} to={url} isActive={() => isActive}>
-        {icon}
-        <span className="link-text">{text}</span>
-      </NavLink>
-    );
-  }
-}

src/renderer/components/layout/sidebar-storage.ts

@@ -0,0 +1,15 @@
+import { createStorage } from "../../utils";
+
+export interface SidebarStorageState {
+  width: number;
+  compact: boolean;
+  expanded: {
+    [itemId: string]: boolean;
+  }
+}
+
+export const sidebarStorage = createStorage<SidebarStorageState>("sidebar", {
+  width: 200,     // sidebar size in non-compact mode
+  compact: false, // compact-mode (icons only)
+  expanded: {},
+});

src/renderer/components/layout/sidebar.scss

@@ -2,9 +2,9 @@
   $iconSize: 24px;
   $itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
 
-  &.pinned {
+  &.compact {
     .sidebar-nav {
-      overflow: auto;
+      @include hidden-scrollbar; // fix: scrollbar overlaps icons
     }
   }
 
@@ -45,6 +45,7 @@
 
   .sidebar-nav {
     padding: $padding / 1.5 0;
+    overflow: auto;
 
     .Icon {
       --size: #{$iconSize};
@@ -54,26 +55,6 @@
       border-radius: 50%;
     }
 
-    .link-text {
-      flex: 1;
-      margin-left: $margin;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    > a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      border: none;
-      padding: $itemSpacing;
-
-      &.active, &:hover {
-        background: $lensBlue;
-        color: $sidebarActiveColor;
-      }
-    }
-
     hr {
       background-color: transparent;
     }

src/renderer/components/layout/sidebar.tsx

@@ -28,17 +28,18 @@ import { isActiveRoute } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac";
 import { Spinner } from "../spinner";
 import { ClusterPageMenuRegistration, clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
-import { SidebarNavItem } from "./sidebar-nav-item";
-import { SidebarContext } from "./sidebar-context";
+import { SidebarItem } from "./sidebar-item";
 
 interface Props {
   className?: string;
-  isPinned: boolean;
-  toggle(): void;
+  compact?: boolean; // compact-mode view: show only icons and expand on :hover
+  toggle(): void; // compact-mode updater
 }
 
 @observer
 export class Sidebar extends React.Component<Props> {
+  static displayName = "Sidebar";
+
   async componentDidMount() {
     crdStore.reloadAll();
   }
@@ -59,13 +60,13 @@ export class Sidebar extends React.Component<Props> {
       });
 
       return (
-        <SidebarNavItem
+        <SidebarItem
           key={group}
-          id={`crd-${group}`}
-          className="sub-menu-parent"
+          id={`crd-group:${group}`}
           url={crdURL({ query: { groups: group } })}
           subMenus={submenus}
           text={group}
+          isActive={false}
         />
       );
     });
@@ -117,7 +118,7 @@ export class Sidebar extends React.Component<Props> {
       }
 
       return (
-        <SidebarNavItem
+        <SidebarItem
           key={id}
           id={id}
           url={pageUrl}
@@ -131,125 +132,123 @@ export class Sidebar extends React.Component<Props> {
   }
 
   render() {
-    const { toggle, isPinned, className } = this.props;
+    const { toggle, compact, className } = this.props;
     const query = namespaceUrlParam.toObjectParam();
 
     return (
-      <SidebarContext.Provider value={{ pinned: isPinned }}>
-        <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
-          <div className="header flex align-center">
-            <NavLink exact to="/" className="box grow">
-              <Icon svg="logo-lens" className="logo-icon"/>
-              <div className="logo-text">Lens</div>
-            </NavLink>
-            <Icon
-              className="pin-icon"
-              tooltip="Compact view"
-              material={isPinned ? "keyboard_arrow_left" : "keyboard_arrow_right"}
-              onClick={toggle}
-              focusable={false}
-            />
-          </div>
-          <div className="sidebar-nav flex column box grow-fixed">
-            <SidebarNavItem
-              id="cluster"
-              isActive={isActiveRoute(clusterRoute)}
-              isHidden={!isAllowedResource("nodes")}
-              url={clusterURL()}
-              text="Cluster"
-              icon={<Icon svg="kube"/>}
-            />
-            <SidebarNavItem
-              id="nodes"
-              isActive={isActiveRoute(nodesRoute)}
-              isHidden={!isAllowedResource("nodes")}
-              url={nodesURL()}
-              text="Nodes"
-              icon={<Icon svg="nodes"/>}
-            />
-            <SidebarNavItem
-              id="workloads"
-              isActive={isActiveRoute(workloadsRoute)}
-              isHidden={Workloads.tabRoutes.length == 0}
-              url={workloadsURL({ query })}
-              subMenus={Workloads.tabRoutes}
-              text="Workloads"
-              icon={<Icon svg="workloads"/>}
-            />
-            <SidebarNavItem
-              id="config"
-              isActive={isActiveRoute(configRoute)}
-              isHidden={Config.tabRoutes.length == 0}
-              url={configURL({ query })}
-              subMenus={Config.tabRoutes}
-              text="Configuration"
-              icon={<Icon material="list"/>}
-            />
-            <SidebarNavItem
-              id="networks"
-              isActive={isActiveRoute(networkRoute)}
-              isHidden={Network.tabRoutes.length == 0}
-              url={networkURL({ query })}
-              subMenus={Network.tabRoutes}
-              text="Network"
-              icon={<Icon material="device_hub"/>}
-            />
-            <SidebarNavItem
-              id="storage"
-              isActive={isActiveRoute(storageRoute)}
-              isHidden={Storage.tabRoutes.length == 0}
-              url={storageURL({ query })}
-              subMenus={Storage.tabRoutes}
-              icon={<Icon svg="storage"/>}
-              text="Storage"
-            />
-            <SidebarNavItem
-              id="namespaces"
-              isActive={isActiveRoute(namespacesRoute)}
-              isHidden={!isAllowedResource("namespaces")}
-              url={namespacesURL()}
-              icon={<Icon material="layers"/>}
-              text="Namespaces"
-            />
-            <SidebarNavItem
-              id="events"
-              isActive={isActiveRoute(eventRoute)}
-              isHidden={!isAllowedResource("events")}
-              url={eventsURL({ query })}
-              icon={<Icon material="access_time"/>}
-              text="Events"
-            />
-            <SidebarNavItem
-              id="apps"
-              isActive={isActiveRoute(appsRoute)}
-              url={appsURL({ query })}
-              subMenus={Apps.tabRoutes}
-              icon={<Icon material="apps"/>}
-              text="Apps"
-            />
-            <SidebarNavItem
-              id="users"
-              isActive={isActiveRoute(usersManagementRoute)}
-              url={usersManagementURL({ query })}
-              subMenus={UserManagement.tabRoutes}
-              icon={<Icon material="security"/>}
-              text="Access Control"
-            />
-            <SidebarNavItem
-              id="custom-resources"
-              isActive={isActiveRoute(crdRoute)}
-              isHidden={!isAllowedResource("customresourcedefinitions")}
-              url={crdURL()}
-              subMenus={CustomResources.tabRoutes}
-              icon={<Icon material="extension"/>}
-              text="Custom Resources"
-            >
-              {this.renderCustomResources()}
-            </SidebarNavItem>
-            {this.renderRegisteredMenus()}
-          </div>
+      <div className={cssNames(Sidebar.displayName, "flex column", { compact }, className)}>
+        <div className="header flex align-center">
+          <NavLink exact to="/" className="box grow">
+            <Icon svg="logo-lens" className="logo-icon"/>
+            <div className="logo-text">Lens</div>
+          </NavLink>
+          <Icon
+            focusable={false}
+            className="pin-icon"
+            tooltip="Compact view"
+            material={compact ? "keyboard_arrow_right" : "keyboard_arrow_left"}
+            onClick={toggle}
+          />
         </div>
-      </SidebarContext.Provider>
+        <div className={cssNames("sidebar-nav flex column box grow-fixed", { compact })}>
+          <SidebarItem
+            id="cluster"
+            isActive={isActiveRoute(clusterRoute)}
+            isHidden={!isAllowedResource("nodes")}
+            url={clusterURL()}
+            text="Cluster"
+            icon={<Icon svg="kube"/>}
+          />
+          <SidebarItem
+            id="nodes"
+            isActive={isActiveRoute(nodesRoute)}
+            isHidden={!isAllowedResource("nodes")}
+            url={nodesURL()}
+            text="Nodes"
+            icon={<Icon svg="nodes"/>}
+          />
+          <SidebarItem
+            id="workloads"
+            isActive={isActiveRoute(workloadsRoute)}
+            isHidden={Workloads.tabRoutes.length == 0}
+            url={workloadsURL({ query })}
+            subMenus={Workloads.tabRoutes}
+            text="Workloads"
+            icon={<Icon svg="workloads"/>}
+          />
+          <SidebarItem
+            id="config"
+            isActive={isActiveRoute(configRoute)}
+            isHidden={Config.tabRoutes.length == 0}
+            url={configURL({ query })}
+            subMenus={Config.tabRoutes}
+            text="Configuration"
+            icon={<Icon material="list"/>}
+          />
+          <SidebarItem
+            id="networks"
+            isActive={isActiveRoute(networkRoute)}
+            isHidden={Network.tabRoutes.length == 0}
+            url={networkURL({ query })}
+            subMenus={Network.tabRoutes}
+            text="Network"
+            icon={<Icon material="device_hub"/>}
+          />
+          <SidebarItem
+            id="storage"
+            isActive={isActiveRoute(storageRoute)}
+            isHidden={Storage.tabRoutes.length == 0}
+            url={storageURL({ query })}
+            subMenus={Storage.tabRoutes}
+            icon={<Icon svg="storage"/>}
+            text="Storage"
+          />
+          <SidebarItem
+            id="namespaces"
+            isActive={isActiveRoute(namespacesRoute)}
+            isHidden={!isAllowedResource("namespaces")}
+            url={namespacesURL()}
+            icon={<Icon material="layers"/>}
+            text="Namespaces"
+          />
+          <SidebarItem
+            id="events"
+            isActive={isActiveRoute(eventRoute)}
+            isHidden={!isAllowedResource("events")}
+            url={eventsURL({ query })}
+            icon={<Icon material="access_time"/>}
+            text="Events"
+          />
+          <SidebarItem
+            id="apps"
+            isActive={isActiveRoute(appsRoute)}
+            url={appsURL({ query })}
+            subMenus={Apps.tabRoutes}
+            icon={<Icon material="apps"/>}
+            text="Apps"
+          />
+          <SidebarItem
+            id="users"
+            isActive={isActiveRoute(usersManagementRoute)}
+            url={usersManagementURL({ query })}
+            subMenus={UserManagement.tabRoutes}
+            icon={<Icon material="security"/>}
+            text="Access Control"
+          />
+          <SidebarItem
+            id="custom-resources"
+            isActive={isActiveRoute(crdRoute)}
+            isHidden={!isAllowedResource("customresourcedefinitions")}
+            url={crdURL()}
+            subMenus={CustomResources.tabRoutes}
+            icon={<Icon material="extension"/>}
+            text="Custom Resources"
+          >
+            {this.renderCustomResources()}
+          </SidebarItem>
+          {this.renderRegisteredMenus()}
+        </div>
+      </div>
     );
   }
 }