saleor-dashboard/src/components/SideBar/SideBar.tsx

130 lines
3.3 KiB
TypeScript
Raw Normal View History

2020-09-07 11:28:59 +00:00
import logoLight from "@assets/images/logo-sidebar-light.svg";
2020-09-07 14:34:13 +00:00
import configurationIcon from "@assets/images/menu-configure-icon.svg";
2020-09-07 11:28:59 +00:00
import makeStyles from "@material-ui/core/styles/makeStyles";
2020-09-07 14:34:13 +00:00
import { configurationMenuUrl } from "@saleor/configuration";
2020-09-07 11:28:59 +00:00
import { User } from "@saleor/fragments/types/User";
import useLocalStorage from "@saleor/hooks/useLocalStorage";
import { sectionNames } from "@saleor/intl";
2020-09-08 09:43:05 +00:00
import classNames from "classnames";
2020-09-07 11:28:59 +00:00
import React from "react";
import SVG from "react-inlinesvg";
import { useIntl } from "react-intl";
import { IMenuItem } from "../AppLayout/menuStructure";
2020-09-07 15:13:31 +00:00
import ExpandButton from "./ExpandButton";
2020-09-08 09:43:05 +00:00
import MenuItem, { menuWidth, shrunkMenuWidth } from "./MenuItem";
2020-09-07 11:28:59 +00:00
import { isMenuActive } from "./utils";
const useStyles = makeStyles(
theme => ({
2020-09-07 15:13:31 +00:00
expandButton: {
marginLeft: theme.spacing(2)
},
2020-09-08 09:43:05 +00:00
float: {
position: "fixed"
},
2020-09-07 11:28:59 +00:00
logo: {
2020-09-07 15:13:31 +00:00
margin: `36px 0 ${theme.spacing(3)}px ${theme.spacing(3)}px`
2020-09-07 11:28:59 +00:00
},
root: {
2020-09-08 09:43:05 +00:00
transition: "width 0.5s ease",
2020-09-08 10:14:13 +00:00
width: menuWidth,
zIndex: 100
2020-09-08 09:43:05 +00:00
},
rootShrink: {
width: shrunkMenuWidth
2020-09-07 11:28:59 +00:00
}
}),
{
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 (
2020-09-08 09:43:05 +00:00
<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);
2020-09-07 11:28:59 +00:00
2020-09-08 09:43:05 +00:00
if (
menuItem.permission &&
!user.userPermissions
.map(perm => perm.code)
.includes(menuItem.permission)
) {
return null;
}
2020-09-07 11:28:59 +00:00
2020-09-08 09:43:05 +00:00
return (
<MenuItem
active={isActive}
isMenuShrunk={isShrunk}
menuItem={menuItem}
onClick={onMenuItemClick}
/>
);
})}
{renderConfigure && (
2020-09-07 14:34:13 +00:00
<MenuItem
2020-09-08 09:43:05 +00:00
active={
!menuItems.reduce(
(acc, menuItem) => acc || isMenuActive(location, menuItem),
false
)
}
2020-09-07 14:34:13 +00:00
isMenuShrunk={isShrunk}
2020-09-08 09:43:05 +00:00
menuItem={{
ariaLabel: "configure",
icon: configurationIcon,
label: intl.formatMessage(sectionNames.configuration),
testingContextId: "configure",
url: configurationMenuUrl
}}
2020-09-07 14:34:13 +00:00
onClick={onMenuItemClick}
/>
2020-09-08 09:43:05 +00:00
)}
<ExpandButton
className={classes.expandButton}
isShrunk={isShrunk}
onClick={() => setShrink(!isShrunk)}
2020-09-07 11:28:59 +00:00
/>
2020-09-08 09:43:05 +00:00
</div>
2020-09-07 11:28:59 +00:00
</div>
);
};
SideBar.displayName = "SideBar";
export default SideBar;