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 { return {
sidebarItemRoot: baseSelector, 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 "./sidebar-item.scss";
import React from "react"; import React from "react";
import { computed } from "mobx";
import { cssNames, prevDefault } from "../../utils"; import { cssNames, prevDefault } from "../../utils";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
@ -36,7 +37,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
return Boolean(sidebarStorage.get().compact); return Boolean(sidebarStorage.get().compact);
} }
toggleExpand = (event: React.MouseEvent) => { toggleExpand = prevDefault((event: React.MouseEvent) => {
sidebarStorage.merge(draft => { sidebarStorage.merge(draft => {
draft.expanded[this.id] = !draft.expanded[this.id]; draft.expanded[this.id] = !draft.expanded[this.id];
}); });
@ -45,32 +46,35 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
props: this.props, props: this.props,
event, 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() { render() {
const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props; const { isHidden, isActive, subMenus = [], icon, text, children, url, className } = this.props;
if (isHidden) return null; if (isHidden) return null;
const { id, expanded, compact } = this; const { id: testId, expanded, compact, showSubMenus, toggleExpand } = this;
const isExpandable = (subMenus.length > 0 || children) && !compact;
const classNames = cssNames(SidebarItem.displayName, className, { compact }); const classNames = cssNames(SidebarItem.displayName, className, { compact });
return ( 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 })}> <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> {icon} <span className="link-text">{text}</span>
</NavLink> </NavLink>
{isExpandable && ( {showSubMenus && <Icon
<Icon className="expand-icon box right"
className="expand-icon box right" material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"} />}
onClick={prevDefault(this.toggleExpand)}
/>
)}
</div> </div>
{isExpandable && ( {showSubMenus && (
<ul className={cssNames("sub-menu", { active: isActive })}> <ul className={cssNames("sub-menu", { active: isActive })}>
{subMenus.map(({ title, url }) => ( {subMenus.map(({ title, url }) => (
<NavLink key={url} to={url} className={cssNames({ visible: expanded })}> <NavLink key={url} to={url} className={cssNames({ visible: expanded })}>