mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Moving SidebarNavItem component to its own file
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
a61e20965d
commit
57e0370aa7
7
src/renderer/components/layout/sidebar-context.ts
Normal file
7
src/renderer/components/layout/sidebar-context.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import React from "react";
|
||||
|
||||
export const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
|
||||
|
||||
export type SidebarContextValue = {
|
||||
pinned: boolean;
|
||||
};
|
||||
76
src/renderer/components/layout/sidebar-nav-item.scss
Normal file
76
src/renderer/components/layout/sidebar-nav-item.scss
Normal file
@ -0,0 +1,76 @@
|
||||
.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
|
||||
max-height: 0px;
|
||||
opacity: 0;
|
||||
transition: 125ms line-height ease-out, 200ms 100ms opacity;
|
||||
|
||||
&.visible {
|
||||
line-height: 28px;
|
||||
max-height: 1000px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
89
src/renderer/components/layout/sidebar-nav-item.tsx
Normal file
89
src/renderer/components/layout/sidebar-nav-item.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
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 {
|
||||
url: string;
|
||||
text: React.ReactNode | string;
|
||||
className?: string;
|
||||
icon?: React.ReactNode;
|
||||
isHidden?: boolean;
|
||||
isActive?: boolean;
|
||||
subMenus?: TabLayoutRoute[];
|
||||
testId?: string; // data-test-id="" property for integration tests
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
get itemId() {
|
||||
const url = new URL(this.props.url, `${window.location.protocol}//${window.location.host}`);
|
||||
|
||||
return url.pathname; // pathname without get params
|
||||
}
|
||||
|
||||
@computed get isExpanded() {
|
||||
return navItemState.get(this.itemId);
|
||||
}
|
||||
|
||||
toggleSubMenu = () => {
|
||||
navItemState.set(this.itemId, !this.isExpanded);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isHidden, isActive, subMenus = [], icon, text, url, children, className, testId } = 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={testId}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,22 +1,7 @@
|
||||
.Sidebar {
|
||||
$iconSize: 24px;
|
||||
$activeBgc: $lensBlue;
|
||||
$activeTextColor: $sidebarActiveColor;
|
||||
$itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
|
||||
|
||||
@mixin activeLinkState {
|
||||
&.active {
|
||||
background: $activeBgc;
|
||||
color: $activeTextColor;
|
||||
}
|
||||
@media (hover: hover) { // only for devices supported "true" hover (with mouse or similar)
|
||||
&:hover {
|
||||
background: $activeBgc;
|
||||
color: $activeTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
.sidebar-nav {
|
||||
overflow: auto;
|
||||
@ -77,13 +62,16 @@
|
||||
}
|
||||
|
||||
> a {
|
||||
@include activeLinkState;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
padding: $itemSpacing;
|
||||
|
||||
&.active, &:hover {
|
||||
background: $lensBlue;
|
||||
color: $sidebarActiveColor;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -91,78 +79,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.SidebarNavItem {
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
.nav-item {
|
||||
@include activeLinkState;
|
||||
|
||||
cursor: pointer;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
padding: $itemSpacing;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
&.active {
|
||||
border-left-color: $activeBgc;
|
||||
}
|
||||
|
||||
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
|
||||
max-height: 0px;
|
||||
opacity: 0;
|
||||
transition: 125ms line-height ease-out, 200ms 100ms opacity;
|
||||
|
||||
&.visible {
|
||||
line-height: 28px;
|
||||
max-height: 1000px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import type { TabLayoutRoute } from "./tab-layout";
|
||||
import "./sidebar.scss";
|
||||
|
||||
import React from "react";
|
||||
import { computed, observable, reaction } from "mobx";
|
||||
import type { TabLayoutRoute } from "./tab-layout";
|
||||
import { observer } from "mobx-react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { Trans } from "@lingui/macro";
|
||||
import { createStorage, cssNames } from "../../utils";
|
||||
import { cssNames } from "../../utils";
|
||||
import { Icon } from "../icon";
|
||||
import { workloadsRoute, workloadsURL } from "../+workloads/workloads.route";
|
||||
import { namespacesRoute, namespacesURL } from "../+namespaces/namespaces.route";
|
||||
@ -30,12 +29,8 @@ import { isActiveRoute } from "../../navigation";
|
||||
import { isAllowedResource } from "../../../common/rbac";
|
||||
import { Spinner } from "../spinner";
|
||||
import { ClusterPageMenuRegistration, clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextValue>({ pinned: false });
|
||||
|
||||
type SidebarContextValue = {
|
||||
pinned: boolean;
|
||||
};
|
||||
import { SidebarNavItem } from "./sidebar-nav-item";
|
||||
import { SidebarContext } from "./sidebar-context";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
@ -256,79 +251,3 @@ export class Sidebar extends React.Component<Props> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface SidebarNavItemProps {
|
||||
url: string;
|
||||
text: React.ReactNode | string;
|
||||
className?: string;
|
||||
icon?: React.ReactNode;
|
||||
isHidden?: boolean;
|
||||
isActive?: boolean;
|
||||
subMenus?: TabLayoutRoute[];
|
||||
testId?: string; // data-test-id="" property for integration tests
|
||||
}
|
||||
|
||||
const navItemStorage = createStorage<[string, boolean][]>("sidebar_menu_item", []);
|
||||
const navItemState = observable.map<string, boolean>(navItemStorage.get());
|
||||
|
||||
reaction(() => [...navItemState], (value) => navItemStorage.set(value));
|
||||
|
||||
@observer
|
||||
class SidebarNavItem extends React.Component<SidebarNavItemProps> {
|
||||
static contextType = SidebarContext;
|
||||
public context: SidebarContextValue;
|
||||
|
||||
get itemId() {
|
||||
const url = new URL(this.props.url, `${window.location.protocol}//${window.location.host}`);
|
||||
|
||||
return url.pathname; // pathname without get params
|
||||
}
|
||||
|
||||
@computed get isExpanded() {
|
||||
return navItemState.get(this.itemId);
|
||||
}
|
||||
|
||||
toggleSubMenu = () => {
|
||||
navItemState.set(this.itemId, !this.isExpanded);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { isHidden, isActive, subMenus = [], icon, text, url, children, className, testId } = 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={testId}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user