Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00
Code Issues Releases Activity

feat(sidebar): update menu structure [EE-5666] (#10418)

Browse source
This commit is contained in:
Ali 2023-10-09 19:23:12 +01:00 • committed by GitHub
parent b468070945
commit a0dbabcc5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 519 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/react/sidebar/SidebarItem/SidebarItem.tsx
View file

@ -1,52 +1,71 @@
import { ReactNode } from 'react';
import { Icon } from 'lucide-react';
import { Icon as IconTest } from 'lucide-react';
import clsx from 'clsx';
import { AutomationTestingProps } from '@/types';
import { Icon } from '@@/Icon';
import { useSidebarState } from '../useSidebarState';
import { Wrapper } from './Wrapper';
import { Menu } from './Menu';
import { Head } from './Head';
import { getPathsForChildren } from './utils';
import { SidebarTooltip } from './SidebarTooltip';
import { useSidebarSrefActive } from './useSidebarSrefActive';
interface Props extends AutomationTestingProps {
icon?: Icon;
icon?: IconTest;
to: string;
params?: object;
label: string;
children?: ReactNode;
openOnPaths?: string[];
isSubMenu?: boolean;
ignorePaths?: string[];
includePaths?: string[];
}
export function SidebarItem({
children,
icon,
to,
params,
label,
openOnPaths = [],
isSubMenu = false,
ignorePaths = [],
includePaths = [],
'data-cy': dataCy,
}: Props) {
const childrenPath = getPathsForChildren(children);
const head = (
<Head
icon={icon}
to={to}
params={params}
label={label}
ignorePaths={childrenPath}
data-cy={dataCy}
/>
);
const { isOpen } = useSidebarState();
const anchorProps = useSidebarSrefActive(to, undefined, params, undefined, {
ignorePaths,
includePaths,
});
return (
<Wrapper label={label} className="sidebar">
{children ? (
<Menu head={head} openOnPaths={[...openOnPaths, ...childrenPath]}>
{children}
</Menu>
) : (
head
)}
const anchor = (
<Wrapper label={label}>
<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 (
<SidebarTooltip content={<span className="text-sm">{label}</span>}>
<span className="w-full">{anchor}</span>
</SidebarTooltip>
);
}