mirror of https://github.com/portainer/portainer
feat(sidebar): update menu structure [EE-5666] (#10418)
Ali
1 year ago
committed by
GitHub
parent
b468070945
commit
a0dbabcc5f
@ -1,5 +0,0 @@
|
|||||||
.root {
|
|
||||||
display: block;
|
|
||||||
margin: -5px auto -8px auto;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
@ -1,52 +1,71 @@
|
|||||||
import { ReactNode } from 'react';
|
import { Icon as IconTest } from 'lucide-react';
|
||||||
import { Icon } from 'lucide-react';
|
import clsx from 'clsx';
|
||||||
|
|
||||||
import { AutomationTestingProps } from '@/types';
|
import { AutomationTestingProps } from '@/types';
|
||||||
|
|
||||||
|
import { Icon } from '@@/Icon';
|
||||||
|
|
||||||
|
import { useSidebarState } from '../useSidebarState';
|
||||||
|
|
||||||
import { Wrapper } from './Wrapper';
|
import { Wrapper } from './Wrapper';
|
||||||
import { Menu } from './Menu';
|
import { SidebarTooltip } from './SidebarTooltip';
|
||||||
import { Head } from './Head';
|
import { useSidebarSrefActive } from './useSidebarSrefActive';
|
||||||
import { getPathsForChildren } from './utils';
|
|
||||||
|
|
||||||
interface Props extends AutomationTestingProps {
|
interface Props extends AutomationTestingProps {
|
||||||
icon?: Icon;
|
icon?: IconTest;
|
||||||
to: string;
|
to: string;
|
||||||
params?: object;
|
params?: object;
|
||||||
label: string;
|
label: string;
|
||||||
children?: ReactNode;
|
isSubMenu?: boolean;
|
||||||
openOnPaths?: string[];
|
ignorePaths?: string[];
|
||||||
|
includePaths?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SidebarItem({
|
export function SidebarItem({
|
||||||
children,
|
|
||||||
icon,
|
icon,
|
||||||
to,
|
to,
|
||||||
params,
|
params,
|
||||||
label,
|
label,
|
||||||
openOnPaths = [],
|
isSubMenu = false,
|
||||||
|
ignorePaths = [],
|
||||||
|
includePaths = [],
|
||||||
'data-cy': dataCy,
|
'data-cy': dataCy,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
const childrenPath = getPathsForChildren(children);
|
const { isOpen } = useSidebarState();
|
||||||
const head = (
|
const anchorProps = useSidebarSrefActive(to, undefined, params, undefined, {
|
||||||
<Head
|
ignorePaths,
|
||||||
icon={icon}
|
includePaths,
|
||||||
to={to}
|
});
|
||||||
params={params}
|
|
||||||
label={label}
|
const anchor = (
|
||||||
ignorePaths={childrenPath}
|
<Wrapper label={label}>
|
||||||
data-cy={dataCy}
|
<a
|
||||||
/>
|
href={anchorProps.href}
|
||||||
|
onClick={anchorProps.onClick}
|
||||||
|
className={clsx(
|
||||||
|
anchorProps.className,
|
||||||
|
'text-inherit no-underline hover:text-inherit hover:no-underline focus:text-inherit focus:no-underline',
|
||||||
|
'flex h-8 w-full flex-1 items-center space-x-4 rounded-md text-sm',
|
||||||
|
'transition-colors duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20',
|
||||||
|
{
|
||||||
|
// submenu items are always expanded (in a tooltip or in the sidebar)
|
||||||
|
'w-full justify-start px-3': isOpen || isSubMenu,
|
||||||
|
'w-8 justify-center': !isOpen && !isSubMenu,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
data-cy={dataCy}
|
||||||
|
>
|
||||||
|
{!!icon && <Icon icon={icon} className={clsx('flex [&>svg]:w-4')} />}
|
||||||
|
{(isOpen || isSubMenu) && <span>{label}</span>}
|
||||||
|
</a>
|
||||||
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (isOpen || isSubMenu) return anchor;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper label={label} className="sidebar">
|
<SidebarTooltip content={<span className="text-sm">{label}</span>}>
|
||||||
{children ? (
|
<span className="w-full">{anchor}</span>
|
||||||
<Menu head={head} openOnPaths={[...openOnPaths, ...childrenPath]}>
|
</SidebarTooltip>
|
||||||
{children}
|
|
||||||
</Menu>
|
|
||||||
) : (
|
|
||||||
head
|
|
||||||
)}
|
|
||||||
</Wrapper>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,135 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import { ChevronDown } from 'lucide-react';
|
||||||
|
import { PropsWithChildren, useState } from 'react';
|
||||||
|
|
||||||
|
import { Icon } from '@@/Icon';
|
||||||
|
import { Link } from '@@/Link';
|
||||||
|
|
||||||
|
import { useSidebarState } from '../useSidebarState';
|
||||||
|
|
||||||
|
import { Wrapper } from './Wrapper';
|
||||||
|
import { PathOptions, useSidebarSrefActive } from './useSidebarSrefActive';
|
||||||
|
import { SidebarTooltip } from './SidebarTooltip';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
label: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
to: string;
|
||||||
|
'data-cy': string;
|
||||||
|
pathOptions?: PathOptions;
|
||||||
|
params?: object;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SidebarParent({
|
||||||
|
children,
|
||||||
|
icon,
|
||||||
|
label: title,
|
||||||
|
to,
|
||||||
|
params,
|
||||||
|
pathOptions,
|
||||||
|
'data-cy': dataCy,
|
||||||
|
}: PropsWithChildren<Props>) {
|
||||||
|
const anchorProps = useSidebarSrefActive(
|
||||||
|
to,
|
||||||
|
undefined,
|
||||||
|
params,
|
||||||
|
{},
|
||||||
|
pathOptions
|
||||||
|
);
|
||||||
|
|
||||||
|
const hasActiveChild = !!anchorProps.className;
|
||||||
|
|
||||||
|
const { isOpen: isSidebarOpen } = useSidebarState();
|
||||||
|
|
||||||
|
const [isExpanded, setIsExpanded] = useState(hasActiveChild);
|
||||||
|
|
||||||
|
const parentItem = (
|
||||||
|
<Wrapper className="flex flex-col">
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'w-full h-8 items-center ease-in-out transition-colors flex duration-200 hover:bg-blue-5/20 be:hover:bg-gray-5/20 th-dark:hover:bg-gray-true-5/20 rounded-md',
|
||||||
|
isSidebarOpen && 'pl-3',
|
||||||
|
// only highlight the parent when the sidebar is closed/contracted and a child item is selected
|
||||||
|
(!isSidebarOpen || !isExpanded) && anchorProps.className
|
||||||
|
)}
|
||||||
|
data-cy={dataCy}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex-1 h-full cursor-pointer flex items-center border-none bg-transparent"
|
||||||
|
onClick={() => setIsExpanded(true)}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={to}
|
||||||
|
params={params}
|
||||||
|
className={clsx(
|
||||||
|
'w-full h-full font-medium items-center flex list-none border-none text-gray-5 hover:text-gray-5 hover:no-underline focus:text-gray-5 focus:no-underline',
|
||||||
|
{
|
||||||
|
'justify-start': isSidebarOpen,
|
||||||
|
'justify-center': !isSidebarOpen,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon icon={icon} />
|
||||||
|
{isSidebarOpen && <span className="ml-4">{title}</span>}
|
||||||
|
</Link>
|
||||||
|
</button>
|
||||||
|
{isSidebarOpen && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex-none border-none bg-transparent flex items-center group p-0 px-3 h-8"
|
||||||
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center group-hover:bg-blue-5 be:group-hover:bg-gray-5 group-hover:th-dark:bg-gray-true-7 group-hover:bg-opacity-10 be:group-hover:bg-opacity-10 rounded-full p-[3px] transition ease-in-out">
|
||||||
|
<Icon
|
||||||
|
icon={ChevronDown}
|
||||||
|
size="md"
|
||||||
|
className={clsx('transition ease-in-out', {
|
||||||
|
'rotate-180': isExpanded,
|
||||||
|
'rotate-0': !isExpanded,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
|
||||||
|
const childList = (
|
||||||
|
<ul
|
||||||
|
// pl-11 must be important because it needs to avoid the padding from '.root ul' in sidebar.module.css
|
||||||
|
className={clsx('text-white !pl-11', {
|
||||||
|
hidden: !isExpanded,
|
||||||
|
block: isExpanded,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isSidebarOpen)
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{parentItem}
|
||||||
|
{childList}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarTooltip
|
||||||
|
content={
|
||||||
|
<ul>
|
||||||
|
<li className="flex items-center space-x-2 text-sm mb-1">
|
||||||
|
<span>{title}</span>
|
||||||
|
</li>
|
||||||
|
<div className="bg-blue-8/50 be:bg-gray-8 th-dark:bg-gray-true-8 rounded">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span>{parentItem}</span>
|
||||||
|
</SidebarTooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import Tippy, { TippyProps } from '@tippyjs/react';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
content: React.ReactNode;
|
||||||
|
children?: TippyProps['children'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SidebarTooltip({ children, content }: Props) {
|
||||||
|
return (
|
||||||
|
<Tippy
|
||||||
|
className="sidebar !rounded-md bg-blue-9 p-3 !opacity-100 be:bg-gray-9 th-dark:bg-gray-true-9"
|
||||||
|
content={content}
|
||||||
|
delay={[0, 0]}
|
||||||
|
duration={[0, 0]}
|
||||||
|
zIndex={1000}
|
||||||
|
placement="right"
|
||||||
|
arrow
|
||||||
|
allowHTML
|
||||||
|
interactive
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Tippy>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import {
|
||||||
|
TransitionOptions,
|
||||||
|
useCurrentStateAndParams,
|
||||||
|
useSrefActive,
|
||||||
|
} from '@uirouter/react';
|
||||||
|
|
||||||
|
export type PathOptions = {
|
||||||
|
ignorePaths?: string[];
|
||||||
|
includePaths?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Extends useSrefActive by ignoring or including paths and updating the classNames field returned when a child route is active.
|
||||||
|
* @param to The route to match
|
||||||
|
* @param activeClassName The active class names to return
|
||||||
|
* @param params The route params
|
||||||
|
* @param options The transition options
|
||||||
|
* @param pathOptions The paths to ignore/include
|
||||||
|
*/
|
||||||
|
export function useSidebarSrefActive(
|
||||||
|
to: string,
|
||||||
|
// default values are the classes used in the sidebar for an active item
|
||||||
|
activeClassName: string = 'bg-blue-5/25 be:bg-gray-5/25 th-dark:bg-gray-true-5/25',
|
||||||
|
params: Partial<Record<string, string>> = {},
|
||||||
|
options: TransitionOptions = {},
|
||||||
|
pathOptions: PathOptions = {
|
||||||
|
ignorePaths: [],
|
||||||
|
includePaths: [],
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
const { state: { name: stateName = '' } = {} } = useCurrentStateAndParams();
|
||||||
|
const anchorProps = useSrefActive(to, params || {}, activeClassName, options);
|
||||||
|
|
||||||
|
// overwrite the className to '' if the the current route is in ignorePaths
|
||||||
|
const isIgnorePathInRoute = pathOptions.ignorePaths?.some((path) =>
|
||||||
|
stateName.includes(path)
|
||||||
|
);
|
||||||
|
if (isIgnorePathInRoute) {
|
||||||
|
return { ...anchorProps, className: '' };
|
||||||
|
}
|
||||||
|
|
||||||
|
// overwrite the className to activeClassName if the the current route is in includePaths
|
||||||
|
const isIncludePathInRoute = pathOptions.includePaths?.some((path) =>
|
||||||
|
stateName.includes(path)
|
||||||
|
);
|
||||||
|
if (isIncludePathInRoute) {
|
||||||
|
return { ...anchorProps, className: activeClassName };
|
||||||
|
}
|
||||||
|
|
||||||
|
return anchorProps;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue