62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
|
import Typography from "@material-ui/core/Typography";
|
||
|
|
import classNames from "classnames";
|
||
|
|
import * as React from "react";
|
||
|
|
|
||
|
|
import { User } from "../../auth/types/User";
|
||
|
|
import MenuList from "./MenuList";
|
||
|
|
import { IMenuItem } from "./menuStructure";
|
||
|
|
|
||
|
|
export interface MenuNestedProps {
|
||
|
|
classes: Record<
|
||
|
|
| "menuListItem"
|
||
|
|
| "menuListItemActive"
|
||
|
|
| "menuListItemText"
|
||
|
|
| "menuListNested",
|
||
|
|
string
|
||
|
|
>;
|
||
|
|
isAnyChildActive: boolean;
|
||
|
|
menuItem: IMenuItem;
|
||
|
|
location: string;
|
||
|
|
user: User;
|
||
|
|
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const MenuNested: React.FC<MenuNestedProps> = ({
|
||
|
|
classes,
|
||
|
|
isAnyChildActive,
|
||
|
|
location,
|
||
|
|
menuItem,
|
||
|
|
onMenuItemClick,
|
||
|
|
user
|
||
|
|
}) => {
|
||
|
|
const [isOpened, setOpenStatus] = React.useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={() => setOpenStatus(!isOpened)}
|
||
|
|
className={classNames(classes.menuListItem, {
|
||
|
|
[classes.menuListItemActive]: isAnyChildActive
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
<Typography
|
||
|
|
aria-label={menuItem.ariaLabel}
|
||
|
|
className={classes.menuListItemText}
|
||
|
|
>
|
||
|
|
{menuItem.label}
|
||
|
|
</Typography>
|
||
|
|
{isOpened && (
|
||
|
|
<div className={classes.menuListNested}>
|
||
|
|
<MenuList
|
||
|
|
menuItems={menuItem.children}
|
||
|
|
location={location}
|
||
|
|
user={user}
|
||
|
|
renderConfigure={false}
|
||
|
|
onMenuItemClick={onMenuItemClick}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default MenuNested;
|