mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(sidebar): implement new design [EE-3447] (#7118)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
e5e57978af
commit
ed8f9b5931
54 changed files with 1928 additions and 857 deletions
85
app/react/sidebar/SidebarItem/Head.tsx
Normal file
85
app/react/sidebar/SidebarItem/Head.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import {
|
||||
TransitionOptions,
|
||||
useCurrentStateAndParams,
|
||||
useSrefActive as useUiRouterSrefActive,
|
||||
} from '@uirouter/react';
|
||||
import clsx from 'clsx';
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
import { Link } from '@@/Link';
|
||||
import { IconProps, Icon } from '@@/Icon';
|
||||
|
||||
import { useSidebarState } from '../useSidebarState';
|
||||
|
||||
interface Props extends IconProps, ComponentProps<typeof Link> {
|
||||
label: string;
|
||||
ignorePaths?: string[];
|
||||
}
|
||||
|
||||
export function Head({
|
||||
to,
|
||||
options,
|
||||
params = {},
|
||||
label,
|
||||
icon,
|
||||
ignorePaths = [],
|
||||
}: Props) {
|
||||
const { isOpen } = useSidebarState();
|
||||
const anchorProps = useSrefActive(
|
||||
to,
|
||||
'bg-blue-8 be:bg-gray-8',
|
||||
params,
|
||||
options,
|
||||
ignorePaths
|
||||
);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={anchorProps.href}
|
||||
onClick={anchorProps.onClick}
|
||||
title={label}
|
||||
className={clsx(
|
||||
anchorProps.className,
|
||||
'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit w-full flex-1 rounded-md',
|
||||
{ 'px-3': isOpen }
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx('flex items-center h-8 space-x-4 text-sm', {
|
||||
'justify-start w-full': isOpen,
|
||||
'justify-center w-8': !isOpen,
|
||||
})}
|
||||
>
|
||||
{!!icon && (
|
||||
<Icon icon={icon} feather className={clsx('flex [&>svg]:w-4')} />
|
||||
)}
|
||||
{isOpen && <span>{label}</span>}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function useSrefActive(
|
||||
to: string,
|
||||
activeClassName: string,
|
||||
params: Partial<Record<string, string>> = {},
|
||||
options: TransitionOptions = {},
|
||||
ignorePaths: string[] = []
|
||||
) {
|
||||
const { state } = useCurrentStateAndParams();
|
||||
const anchorProps = useUiRouterSrefActive(
|
||||
to,
|
||||
params || {},
|
||||
activeClassName,
|
||||
options
|
||||
);
|
||||
|
||||
const className = ignorePaths.includes(state.name || '')
|
||||
? ''
|
||||
: anchorProps.className;
|
||||
|
||||
return {
|
||||
...anchorProps,
|
||||
className,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.menu-icon {
|
||||
padding-right: 30px;
|
||||
width: 70px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@media (max-height: 785px) {
|
||||
.menu-icon {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 786px) and (max-height: 924px) {
|
||||
.menu-icon {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import styles from './Icon.module.css';
|
||||
|
||||
interface Props {
|
||||
iconClass: string;
|
||||
}
|
||||
|
||||
export function Icon({ iconClass }: Props) {
|
||||
return (
|
||||
<i
|
||||
role="img"
|
||||
className={clsx('fa', iconClass, styles.menuIcon)}
|
||||
aria-label="itemIcon"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
a.active {
|
||||
color: #fff;
|
||||
border-left-color: var(--border-sidebar-color);
|
||||
}
|
||||
|
||||
a.active {
|
||||
background: var(--grey-37);
|
||||
}
|
||||
|
||||
:global(:root[theme='dark']) a.active {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
|
||||
:global(:root[theme='highcontrast']) a.active {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
||||
:global(:root[data-edition='BE']) a.active {
|
||||
background-color: var(--grey-5);
|
||||
}
|
||||
|
||||
:global(:root[data-edition='BE'][theme='dark']) a.active {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) a.active {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { UISrefActive } from '@uirouter/react';
|
||||
import { Children, ComponentProps, ReactNode } from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Link as NavLink } from '@@/Link';
|
||||
|
||||
import styles from './Link.module.css';
|
||||
|
||||
interface Props extends ComponentProps<typeof NavLink> {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function Link({ children, to, options, params, title }: Props) {
|
||||
const label = title || getLabel(children);
|
||||
|
||||
return (
|
||||
<UISrefActive class={styles.active}>
|
||||
<NavLink
|
||||
to={to}
|
||||
params={params}
|
||||
className={styles.link}
|
||||
title={label}
|
||||
options={options}
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
</UISrefActive>
|
||||
);
|
||||
}
|
||||
|
||||
function getLabel(children: ReactNode) {
|
||||
return _.first(
|
||||
_.compact(
|
||||
Children.map(children, (child) => {
|
||||
if (typeof child === 'string') {
|
||||
return child;
|
||||
}
|
||||
|
||||
return '';
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.sidebar-menu-head {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-menu-head .sidebar-menu-indicator {
|
||||
background: none;
|
||||
border: 0;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.items {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.items > * {
|
||||
text-indent: 35px;
|
||||
}
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
import { useCurrentStateAndParams } from '@uirouter/react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
Children,
|
||||
PropsWithChildren,
|
||||
ReactElement,
|
||||
ReactNode,
|
||||
useMemo,
|
||||
useReducer,
|
||||
} from 'react';
|
||||
import { ChevronDown, ChevronUp } from 'react-feather';
|
||||
|
||||
import { useSidebarState } from '../useSidebarState';
|
||||
|
||||
import styles from './Menu.module.css';
|
||||
import { getPaths } from './utils';
|
||||
|
||||
interface Props {
|
||||
head: ReactNode;
|
||||
|
|
@ -26,38 +25,32 @@ export function Menu({
|
|||
const { isOpen: isSidebarOpen } = useSidebarState();
|
||||
|
||||
const paths = useMemo(
|
||||
() => [
|
||||
...getPaths(head, []),
|
||||
...getPathsForChildren(children),
|
||||
...openOnPaths,
|
||||
],
|
||||
[children, openOnPaths, head]
|
||||
() => [...getPaths(head, []), ...openOnPaths],
|
||||
[openOnPaths, head]
|
||||
);
|
||||
|
||||
const { isOpen, toggleOpen } = useIsOpen(isSidebarOpen, paths);
|
||||
|
||||
const CollapseButtonIcon = isOpen ? ChevronUp : ChevronDown;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.sidebarMenuHead}>
|
||||
{Children.count(children) > 0 && (
|
||||
<div className="flex-1">
|
||||
<div className="flex w-full justify-between items-center relative ">
|
||||
{head}
|
||||
{isSidebarOpen && Children.count(children) > 0 && (
|
||||
<button
|
||||
className={clsx('small', styles.sidebarMenuIndicator)}
|
||||
className="bg-transparent border-0 w-6 h-6 flex items-center justify-center absolute right-2 text-gray-5"
|
||||
onClick={handleClickArrow}
|
||||
type="button"
|
||||
aria-label="Collapse button"
|
||||
>
|
||||
<i
|
||||
className={clsx(
|
||||
'fas',
|
||||
isOpen ? 'fa-chevron-down' : 'fa-chevron-right'
|
||||
)}
|
||||
/>
|
||||
<CollapseButtonIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{head}
|
||||
</div>
|
||||
|
||||
{isOpen && <ul className={styles.items}>{children}</ul>}
|
||||
</>
|
||||
{isOpen && <ul className="!pl-8">{children}</ul>}
|
||||
</div>
|
||||
);
|
||||
|
||||
function handleClickArrow(e: React.MouseEvent<HTMLButtonElement>) {
|
||||
|
|
@ -100,30 +93,3 @@ function useIsOpen(
|
|||
return isOpenByState;
|
||||
}
|
||||
}
|
||||
|
||||
function isReactElement(element: ReactNode): element is ReactElement {
|
||||
return (
|
||||
!!element &&
|
||||
typeof element === 'object' &&
|
||||
'type' in element &&
|
||||
'props' in element
|
||||
);
|
||||
}
|
||||
|
||||
function getPathsForChildren(children: ReactNode): string[] {
|
||||
return Children.map(children, (child) => getPaths(child, []))?.flat() || [];
|
||||
}
|
||||
|
||||
function getPaths(element: ReactNode, paths: string[]): string[] {
|
||||
if (!isReactElement(element)) {
|
||||
return paths;
|
||||
}
|
||||
|
||||
if (typeof element.props.to === 'undefined') {
|
||||
return Children.map(element.props.children, (child) =>
|
||||
getPaths(child, paths)
|
||||
);
|
||||
}
|
||||
|
||||
return [element.props.to, ...paths];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
.sidebar-menu-item {
|
||||
text-indent: 25px;
|
||||
}
|
||||
|
||||
.sidebar-menu-item a {
|
||||
padding-left: 5px;
|
||||
border-left: 3px solid transparent;
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.03em;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
text-decoration: none;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.sidebar-menu-item a {
|
||||
color: var(--grey-56);
|
||||
}
|
||||
:global(:root[theme='dark']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[theme='highcontrast']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[data-edition='BE']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='dark']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
@media (max-height: 785px) {
|
||||
.sidebar-menu-item a {
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 786px) and (max-height: 924px) {
|
||||
.sidebar-menu-item a {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-item a:hover {
|
||||
color: #fff;
|
||||
border-left-color: #e99d1a;
|
||||
}
|
||||
|
||||
.sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-37);
|
||||
}
|
||||
:global(:root[theme='dark']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
:global(:root[theme='highcontrast']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
:global(:root[data-edition='BE']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-34);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='dark']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Meta, Story } from '@storybook/react';
|
||||
import { Clock, Icon } from 'react-feather';
|
||||
|
||||
import { SidebarItem } from '.';
|
||||
|
||||
|
|
@ -9,33 +10,30 @@ const meta: Meta = {
|
|||
export default meta;
|
||||
|
||||
interface StoryProps {
|
||||
iconClass?: string;
|
||||
className: string;
|
||||
icon?: Icon;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function Template({ iconClass, className, label: linkName }: StoryProps) {
|
||||
function Template({ icon, label }: StoryProps) {
|
||||
return (
|
||||
<ul className="sidebar">
|
||||
<SidebarItem.Wrapper className={className}>
|
||||
<SidebarItem.Link to="example.path" params={{ endpointId: 1 }}>
|
||||
{linkName}
|
||||
{iconClass && <SidebarItem.Icon iconClass={iconClass} />}
|
||||
</SidebarItem.Link>
|
||||
</SidebarItem.Wrapper>
|
||||
<SidebarItem
|
||||
to="example.path"
|
||||
params={{ endpointId: 1 }}
|
||||
icon={icon}
|
||||
label={label}
|
||||
/>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export const Primary: Story<StoryProps> = Template.bind({});
|
||||
Primary.args = {
|
||||
iconClass: 'fa-tachometer-alt fa-fw',
|
||||
className: 'exampleItemClass',
|
||||
icon: Clock,
|
||||
label: 'Item with icon',
|
||||
};
|
||||
|
||||
export const WithoutIcon: Story<StoryProps> = Template.bind({});
|
||||
WithoutIcon.args = {
|
||||
className: 'exampleItemClass',
|
||||
label: 'Item without icon',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
import { render } from '@/react-tools/test-utils';
|
||||
|
||||
import { SidebarItem } from '.';
|
||||
|
||||
test('should be visible & have expected class', () => {
|
||||
const { getByRole, getByText } = renderComponent('Test', 'testClass');
|
||||
const listItem = getByRole('listitem');
|
||||
expect(listItem).toBeVisible();
|
||||
expect(listItem).toHaveClass('testClass');
|
||||
expect(getByText('Test')).toBeVisible();
|
||||
});
|
||||
|
||||
test('icon should with correct icon if iconClass is provided', () => {
|
||||
const { getByLabelText } = renderComponent('', '', 'testIconClass');
|
||||
const sidebarIcon = getByLabelText('itemIcon');
|
||||
expect(sidebarIcon).toBeVisible();
|
||||
expect(sidebarIcon).toHaveClass('testIconClass');
|
||||
});
|
||||
|
||||
test('icon should not be rendered if iconClass is not provided', () => {
|
||||
const { queryByRole } = renderComponent();
|
||||
expect(queryByRole('img')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
function renderComponent(label = '', className = '', iconClass = '') {
|
||||
return render(
|
||||
<SidebarItem.Wrapper className={className}>
|
||||
<SidebarItem.Link to="" params={{ endpointId: 1 }}>
|
||||
{label}
|
||||
</SidebarItem.Link>
|
||||
<SidebarItem.Icon iconClass={iconClass} />
|
||||
</SidebarItem.Wrapper>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,38 +1,43 @@
|
|||
import { ReactNode } from 'react';
|
||||
import { Icon } from 'react-feather';
|
||||
|
||||
import { Wrapper } from './Wrapper';
|
||||
import { Link } from './Link';
|
||||
import { Menu } from './Menu';
|
||||
import { Icon } from './Icon';
|
||||
import { Head } from './Head';
|
||||
import { getPathsForChildren } from './utils';
|
||||
|
||||
type Props = {
|
||||
iconClass?: string;
|
||||
interface Props {
|
||||
icon?: Icon;
|
||||
to: string;
|
||||
params?: object;
|
||||
label: string;
|
||||
children?: ReactNode;
|
||||
openOnPaths?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function SidebarItem({
|
||||
children,
|
||||
iconClass,
|
||||
icon,
|
||||
to,
|
||||
params,
|
||||
label,
|
||||
openOnPaths,
|
||||
openOnPaths = [],
|
||||
}: Props) {
|
||||
const childrenPath = getPathsForChildren(children);
|
||||
const head = (
|
||||
<Link to={to} params={params}>
|
||||
{label}
|
||||
{iconClass && <Icon iconClass={iconClass} />}
|
||||
</Link>
|
||||
<Head
|
||||
icon={icon}
|
||||
to={to}
|
||||
params={params}
|
||||
label={label}
|
||||
ignorePaths={childrenPath}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper label={label}>
|
||||
{children ? (
|
||||
<Menu head={head} openOnPaths={openOnPaths}>
|
||||
<Menu head={head} openOnPaths={[...openOnPaths, ...childrenPath]}>
|
||||
{children}
|
||||
</Menu>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { PropsWithChildren, AriaAttributes } from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import styles from './SidebarItem.module.css';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
label?: string;
|
||||
|
|
@ -16,7 +14,11 @@ export function Wrapper({
|
|||
}: PropsWithChildren<Props> & AriaAttributes) {
|
||||
return (
|
||||
<li
|
||||
className={clsx(styles.sidebarMenuItem, className)}
|
||||
className={clsx(
|
||||
'flex',
|
||||
className,
|
||||
'text-gray-3 min-h-8 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
|
||||
)}
|
||||
title={label}
|
||||
aria-label={label}
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
import { SidebarItem as MainComponent } from './SidebarItem';
|
||||
import { Icon } from './Icon';
|
||||
import { Link } from './Link';
|
||||
import { Menu } from './Menu';
|
||||
import { Wrapper } from './Wrapper';
|
||||
|
||||
interface SubComponents {
|
||||
Icon: typeof Icon;
|
||||
Link: typeof Link;
|
||||
Menu: typeof Menu;
|
||||
Wrapper: typeof Wrapper;
|
||||
}
|
||||
|
|
@ -14,7 +10,5 @@ interface SubComponents {
|
|||
export const SidebarItem: typeof MainComponent & SubComponents =
|
||||
MainComponent as typeof MainComponent & SubComponents;
|
||||
|
||||
SidebarItem.Link = Link;
|
||||
SidebarItem.Icon = Icon;
|
||||
SidebarItem.Menu = Menu;
|
||||
SidebarItem.Wrapper = Wrapper;
|
||||
|
|
|
|||
28
app/react/sidebar/SidebarItem/utils.ts
Normal file
28
app/react/sidebar/SidebarItem/utils.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { ReactNode, ReactElement, Children } from 'react';
|
||||
|
||||
function isReactElement(element: ReactNode): element is ReactElement {
|
||||
return (
|
||||
!!element &&
|
||||
typeof element === 'object' &&
|
||||
'type' in element &&
|
||||
'props' in element
|
||||
);
|
||||
}
|
||||
|
||||
export function getPathsForChildren(children: ReactNode): string[] {
|
||||
return Children.map(children, (child) => getPaths(child, []))?.flat() || [];
|
||||
}
|
||||
|
||||
export function getPaths(element: ReactNode, paths: string[]): string[] {
|
||||
if (!isReactElement(element)) {
|
||||
return paths;
|
||||
}
|
||||
|
||||
if (typeof element.props.to === 'undefined') {
|
||||
return Children.map(element.props.children, (child) =>
|
||||
getPaths(child, paths)
|
||||
);
|
||||
}
|
||||
|
||||
return [element.props.to, ...paths];
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue