2022-06-23 07:25:56 +00:00
|
|
|
import { ReactNode } from 'react';
|
2022-11-28 02:00:28 +00:00
|
|
|
import { Icon } from 'lucide-react';
|
2022-06-23 07:25:56 +00:00
|
|
|
|
2022-06-28 16:36:40 +00:00
|
|
|
import { AutomationTestingProps } from '@/types';
|
|
|
|
|
|
2022-06-23 07:25:56 +00:00
|
|
|
import { Wrapper } from './Wrapper';
|
|
|
|
|
import { Menu } from './Menu';
|
2022-06-28 07:42:42 +00:00
|
|
|
import { Head } from './Head';
|
|
|
|
|
import { getPathsForChildren } from './utils';
|
2022-06-23 07:25:56 +00:00
|
|
|
|
2022-06-28 16:36:40 +00:00
|
|
|
interface Props extends AutomationTestingProps {
|
2022-06-28 07:42:42 +00:00
|
|
|
icon?: Icon;
|
2022-06-23 07:25:56 +00:00
|
|
|
to: string;
|
|
|
|
|
params?: object;
|
|
|
|
|
label: string;
|
|
|
|
|
children?: ReactNode;
|
|
|
|
|
openOnPaths?: string[];
|
2022-06-28 07:42:42 +00:00
|
|
|
}
|
2022-06-23 07:25:56 +00:00
|
|
|
|
|
|
|
|
export function SidebarItem({
|
|
|
|
|
children,
|
2022-06-28 07:42:42 +00:00
|
|
|
icon,
|
2022-06-23 07:25:56 +00:00
|
|
|
to,
|
|
|
|
|
params,
|
|
|
|
|
label,
|
2022-06-28 07:42:42 +00:00
|
|
|
openOnPaths = [],
|
2022-06-28 16:36:40 +00:00
|
|
|
'data-cy': dataCy,
|
2022-06-23 07:25:56 +00:00
|
|
|
}: Props) {
|
2022-06-28 07:42:42 +00:00
|
|
|
const childrenPath = getPathsForChildren(children);
|
2022-06-23 07:25:56 +00:00
|
|
|
const head = (
|
2022-06-28 07:42:42 +00:00
|
|
|
<Head
|
|
|
|
|
icon={icon}
|
|
|
|
|
to={to}
|
|
|
|
|
params={params}
|
|
|
|
|
label={label}
|
|
|
|
|
ignorePaths={childrenPath}
|
2022-06-28 16:36:40 +00:00
|
|
|
data-cy={dataCy}
|
2022-06-28 07:42:42 +00:00
|
|
|
/>
|
2022-06-23 07:25:56 +00:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
2022-12-04 20:47:43 +00:00
|
|
|
<Wrapper label={label} className="sidebar">
|
2022-06-23 07:25:56 +00:00
|
|
|
{children ? (
|
2022-06-28 07:42:42 +00:00
|
|
|
<Menu head={head} openOnPaths={[...openOnPaths, ...childrenPath]}>
|
2022-06-23 07:25:56 +00:00
|
|
|
{children}
|
|
|
|
|
</Menu>
|
|
|
|
|
) : (
|
|
|
|
|
head
|
|
|
|
|
)}
|
|
|
|
|
</Wrapper>
|
|
|
|
|
);
|
|
|
|
|
}
|
