129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
import logoLight from "@assets/images/logo-sidebar-light.svg";
|
|
import configurationIcon from "@assets/images/menu-configure-icon.svg";
|
|
import makeStyles from "@material-ui/core/styles/makeStyles";
|
|
import { configurationMenuUrl } from "@saleor/configuration";
|
|
import { User } from "@saleor/fragments/types/User";
|
|
import useLocalStorage from "@saleor/hooks/useLocalStorage";
|
|
import { sectionNames } from "@saleor/intl";
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
import SVG from "react-inlinesvg";
|
|
import { useIntl } from "react-intl";
|
|
|
|
import { IMenuItem } from "../AppLayout/menuStructure";
|
|
import ExpandButton from "./ExpandButton";
|
|
import MenuItem, { menuWidth, shrunkMenuWidth } from "./MenuItem";
|
|
import { isMenuActive } from "./utils";
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
expandButton: {
|
|
marginLeft: theme.spacing(2)
|
|
},
|
|
float: {
|
|
position: "fixed"
|
|
},
|
|
logo: {
|
|
margin: `36px 0 ${theme.spacing(3)}px ${theme.spacing(3)}px`
|
|
},
|
|
root: {
|
|
transition: "width 0.5s ease",
|
|
width: menuWidth,
|
|
zIndex: 100
|
|
},
|
|
rootShrink: {
|
|
width: shrunkMenuWidth
|
|
}
|
|
}),
|
|
{
|
|
name: "SideBar"
|
|
}
|
|
);
|
|
|
|
export interface SideBarProps {
|
|
className?: string;
|
|
menuItems: IMenuItem[];
|
|
location: string;
|
|
user: User;
|
|
renderConfigure: boolean;
|
|
onMenuItemClick: (url: string, event: React.MouseEvent) => void;
|
|
}
|
|
|
|
export interface IActiveSubMenu {
|
|
isActive: boolean;
|
|
label: string | null;
|
|
}
|
|
|
|
const SideBar: React.FC<SideBarProps> = ({
|
|
location,
|
|
menuItems,
|
|
renderConfigure,
|
|
user,
|
|
onMenuItemClick
|
|
}) => {
|
|
const classes = useStyles({});
|
|
const [isShrunk, setShrink] = useLocalStorage("isMenuSmall", false);
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<div
|
|
className={classNames(classes.root, {
|
|
[classes.rootShrink]: isShrunk
|
|
})}
|
|
>
|
|
<div className={classes.float}>
|
|
<div className={classes.logo}>
|
|
<SVG src={logoLight} />
|
|
</div>
|
|
{menuItems.map(menuItem => {
|
|
const isActive = isMenuActive(location, menuItem);
|
|
|
|
if (
|
|
menuItem.permission &&
|
|
!user.userPermissions
|
|
.map(perm => perm.code)
|
|
.includes(menuItem.permission)
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<MenuItem
|
|
active={isActive}
|
|
isMenuShrunk={isShrunk}
|
|
menuItem={menuItem}
|
|
onClick={onMenuItemClick}
|
|
/>
|
|
);
|
|
})}
|
|
{renderConfigure && (
|
|
<MenuItem
|
|
active={
|
|
!menuItems.reduce(
|
|
(acc, menuItem) => acc || isMenuActive(location, menuItem),
|
|
false
|
|
)
|
|
}
|
|
isMenuShrunk={isShrunk}
|
|
menuItem={{
|
|
ariaLabel: "configure",
|
|
icon: configurationIcon,
|
|
label: intl.formatMessage(sectionNames.configuration),
|
|
testingContextId: "configure",
|
|
url: configurationMenuUrl
|
|
}}
|
|
onClick={onMenuItemClick}
|
|
/>
|
|
)}
|
|
<ExpandButton
|
|
className={classes.expandButton}
|
|
isShrunk={isShrunk}
|
|
onClick={() => setShrink(!isShrunk)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SideBar.displayName = "SideBar";
|
|
export default SideBar;
|