hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

reverted: expanding sub-menus by clicking whole sidebar-item area instead of arrow-icon only

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2021-03-10 23:13:58 +02:00
parent 5f459618f2
commit b9f7d73e18
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
integration/__tests__/cluster-pages.tests.ts
View File

@ -58,7 +58,7 @@ describe("Lens cluster pages", () => {
return {
sidebarItemRoot: baseSelector,
expandSubMenu: `${baseSelector} .expand-icon`,
expandSubMenu: `${baseSelector} .nav-item a`,
};
}

32
src/renderer/components/layout/sidebar-item.tsx
View File

@ -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 })}>