diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts
index 1ffc985ab3..e4bd84f572 100644
--- a/integration/__tests__/cluster-pages.tests.ts
+++ b/integration/__tests__/cluster-pages.tests.ts
@@ -58,7 +58,7 @@ describe("Lens cluster pages", () => {
 
       return {
         sidebarItemRoot: baseSelector,
-        expandSubMenu: `${baseSelector} .expand-icon`,
+        expandSubMenu: `${baseSelector} .nav-item a`,
       };
     }
 
diff --git a/src/renderer/components/layout/sidebar-item.tsx b/src/renderer/components/layout/sidebar-item.tsx
index 7982b20b1c..599c333f5a 100644
--- a/src/renderer/components/layout/sidebar-item.tsx
+++ b/src/renderer/components/layout/sidebar-item.tsx
@@ -1,6 +1,7 @@
 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";
@@ -36,7 +37,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
     return Boolean(sidebarStorage.get().compact);
   }
 
-  toggleExpand = (event: React.MouseEvent) => {
+  toggleExpand = prevDefault((event: React.MouseEvent) => {
     sidebarStorage.merge(draft => {
       draft.expanded[this.id] = !draft.expanded[this.id];
     });
@@ -45,32 +46,35 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
       props: this.props,
       event,
     });
-  };
+  });
+
+  @computed get showSubMenus(): boolean {
+    const { subMenus, children } = this.props;
+    const hasContent = subMenus?.length > 0 || children;
+
+    return Boolean(hasContent && !this.compact) /*not available in compact-mode*/;
+  }
 
   render() {
     const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props;
 
     if (isHidden) return null;
 
-    const { id, expanded, compact } = this;
-    const isExpandable = (subMenus.length > 0 || children) && !compact;
+    const { id: testId, expanded, compact, showSubMenus, toggleExpand } = this;
     const classNames = cssNames(SidebarItem.displayName, className, { compact });
 
     return (
-      <div className={classNames} data-test-id={id}>
+      <div className={classNames} data-test-id={testId}>
         <div className={cssNames("nav-item flex align-center", { active: isActive })}>
-          <NavLink to={url} isActive={() => isActive}>
+          <NavLink to={url} isActive={() => isActive} onClick={showSubMenus ? toggleExpand : undefined}>
             {icon} <span className="link-text">{text}</span>
           </NavLink>
-          {isExpandable && (
-            <Icon
-              className="expand-icon box right"
-              material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
-              onClick={prevDefault(this.toggleExpand)}
-            />
-          )}
+          {showSubMenus && <Icon
+            className="expand-icon box right"
+            material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          />}
         </div>
-        {isExpandable && (
+        {showSubMenus && (
           <ul className={cssNames("sub-menu", { active: isActive })}>
             {subMenus.map(({ title, url }) => (
               <NavLink key={url} to={url} className={cssNames({ visible: expanded })}>