Remove obsolete files
This commit is contained in:
dominik-zeglen
parent
97c3d06241
commit
ac0e8f03fc
3 changed files with 0 additions and 637 deletions
|
|
@ -1,369 +0,0 @@
|
||||||
import configureIcon from "@assets/images/menu-configure-icon.svg";
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
|
||||||
import Typography from "@material-ui/core/Typography";
|
|
||||||
import { User } from "@saleor/fragments/types/User";
|
|
||||||
import useTheme from "@saleor/hooks/useTheme";
|
|
||||||
import { sectionNames } from "@saleor/intl";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import React from "react";
|
|
||||||
import SVG from "react-inlinesvg";
|
|
||||||
import { FormattedMessage, useIntl } from "react-intl";
|
|
||||||
import { matchPath } from "react-router";
|
|
||||||
|
|
||||||
import {
|
|
||||||
configurationMenuUrl,
|
|
||||||
createConfigurationMenu
|
|
||||||
} from "../../configuration";
|
|
||||||
import { createHref } from "../../misc";
|
|
||||||
import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
|
|
||||||
import MenuNested from "./MenuNested";
|
|
||||||
import { IMenuItem } from "./menuStructure";
|
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
|
||||||
theme => ({
|
|
||||||
menuIcon: {
|
|
||||||
"& svg": {
|
|
||||||
height: 32,
|
|
||||||
width: 32
|
|
||||||
},
|
|
||||||
display: "inline-block",
|
|
||||||
position: "relative",
|
|
||||||
top: 8
|
|
||||||
},
|
|
||||||
menuIconDark: {
|
|
||||||
"& path": {
|
|
||||||
fill: theme.palette.common.white
|
|
||||||
}
|
|
||||||
},
|
|
||||||
menuIconSmall: {
|
|
||||||
left: -5
|
|
||||||
},
|
|
||||||
menuIsActive: {
|
|
||||||
boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
|
|
||||||
},
|
|
||||||
menuItemHover: {
|
|
||||||
"& p": {
|
|
||||||
fontSize: 14,
|
|
||||||
transition: "color 0.5s ease, opacity 0.3s ease-out"
|
|
||||||
},
|
|
||||||
"& path": {
|
|
||||||
transition: "fill 0.5s ease"
|
|
||||||
},
|
|
||||||
"&:hover": {
|
|
||||||
"& p": {
|
|
||||||
color: theme.palette.primary.main
|
|
||||||
},
|
|
||||||
"& path": {
|
|
||||||
fill: theme.palette.primary.main
|
|
||||||
},
|
|
||||||
"&:before": {
|
|
||||||
borderLeft: `solid 2px ${theme.palette.primary.main}`,
|
|
||||||
content: "''",
|
|
||||||
height: 33,
|
|
||||||
left: -20,
|
|
||||||
position: "absolute",
|
|
||||||
top: 8
|
|
||||||
},
|
|
||||||
color: theme.palette.primary.main
|
|
||||||
},
|
|
||||||
cursor: "pointer",
|
|
||||||
position: "relative"
|
|
||||||
},
|
|
||||||
menuList: {
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
height: "100%",
|
|
||||||
marginLeft: theme.spacing(4),
|
|
||||||
marginTop: theme.spacing(2),
|
|
||||||
paddingBottom: theme.spacing(3)
|
|
||||||
},
|
|
||||||
menuListItem: {
|
|
||||||
alignItems: "center",
|
|
||||||
display: "block",
|
|
||||||
marginBottom: theme.spacing(5),
|
|
||||||
paddingLeft: 0,
|
|
||||||
textDecoration: "none",
|
|
||||||
transition: theme.transitions.duration.standard + "ms"
|
|
||||||
},
|
|
||||||
menuListItemActive: {
|
|
||||||
"& $menuListItemText": {
|
|
||||||
color: theme.palette.primary.main
|
|
||||||
},
|
|
||||||
"& path": {
|
|
||||||
color: theme.palette.primary.main,
|
|
||||||
fill: theme.palette.primary.main
|
|
||||||
}
|
|
||||||
},
|
|
||||||
menuListItemOpen: {
|
|
||||||
"&:after": {
|
|
||||||
borderBottom: `10px solid transparent`,
|
|
||||||
borderLeft: `10px solid ${theme.palette.background.paper}`,
|
|
||||||
borderTop: `10px solid transparent`,
|
|
||||||
content: "''",
|
|
||||||
height: 0,
|
|
||||||
position: "absolute",
|
|
||||||
right: -30,
|
|
||||||
top: 15,
|
|
||||||
width: 0
|
|
||||||
},
|
|
||||||
"&:before": {
|
|
||||||
borderLeft: `solid 2px ${theme.palette.primary.main}`,
|
|
||||||
content: "''",
|
|
||||||
height: 33,
|
|
||||||
left: -20,
|
|
||||||
position: "absolute",
|
|
||||||
top: 8
|
|
||||||
},
|
|
||||||
position: "relative"
|
|
||||||
},
|
|
||||||
menuListItemText: {
|
|
||||||
"&:hover": {
|
|
||||||
color: theme.palette.primary.main
|
|
||||||
},
|
|
||||||
bottom: 0,
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "1rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
left: 30,
|
|
||||||
opacity: 1,
|
|
||||||
paddingLeft: 16,
|
|
||||||
position: "absolute",
|
|
||||||
textTransform: "uppercase",
|
|
||||||
transition: "opacity 0.5s ease"
|
|
||||||
},
|
|
||||||
menuListItemTextHide: {
|
|
||||||
bottom: 0,
|
|
||||||
left: 30,
|
|
||||||
opacity: 0,
|
|
||||||
position: "absolute"
|
|
||||||
},
|
|
||||||
subMenu: {
|
|
||||||
padding: "0 15px"
|
|
||||||
},
|
|
||||||
subMenuDrawer: {
|
|
||||||
background: "#000",
|
|
||||||
cursor: "pointer",
|
|
||||||
height: "100vh",
|
|
||||||
left: 0,
|
|
||||||
opacity: 0.2,
|
|
||||||
position: "absolute",
|
|
||||||
top: 0,
|
|
||||||
width: 0,
|
|
||||||
zIndex: -2
|
|
||||||
},
|
|
||||||
subMenuDrawerOpen: {
|
|
||||||
width: `100vw`
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{ name: "MenuList" }
|
|
||||||
);
|
|
||||||
|
|
||||||
interface MenuListProps {
|
|
||||||
className?: string;
|
|
||||||
menuItems: IMenuItem[];
|
|
||||||
isMenuSmall: boolean;
|
|
||||||
location: string;
|
|
||||||
user: User;
|
|
||||||
renderConfigure: boolean;
|
|
||||||
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface IActiveSubMenu {
|
|
||||||
isActive: boolean;
|
|
||||||
label: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MenuList: React.FC<MenuListProps> = props => {
|
|
||||||
const {
|
|
||||||
className,
|
|
||||||
menuItems,
|
|
||||||
isMenuSmall,
|
|
||||||
location,
|
|
||||||
user,
|
|
||||||
renderConfigure,
|
|
||||||
onMenuItemClick
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const classes = useStyles(props);
|
|
||||||
|
|
||||||
const { isDark } = useTheme();
|
|
||||||
const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
|
|
||||||
isActive: false,
|
|
||||||
label: null
|
|
||||||
});
|
|
||||||
const intl = useIntl();
|
|
||||||
|
|
||||||
const configurationMenu = createConfigurationMenu(intl).map(menu => {
|
|
||||||
menu.menuItems.map(item =>
|
|
||||||
user.userPermissions.map(perm => perm.code).includes(item.permission)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleSubMenu = itemLabel => {
|
|
||||||
setActiveSubMenu({
|
|
||||||
isActive:
|
|
||||||
itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true,
|
|
||||||
label: itemLabel
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeSubMenu = (menuItemUrl, event) => {
|
|
||||||
setActiveSubMenu({
|
|
||||||
isActive: false,
|
|
||||||
label: null
|
|
||||||
});
|
|
||||||
if (menuItemUrl && event) {
|
|
||||||
onMenuItemClick(menuItemUrl, event);
|
|
||||||
event.stopPropagation();
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={classNames(className, {
|
|
||||||
[classes.menuIsActive]: activeSubMenu.isActive
|
|
||||||
})}
|
|
||||||
data-test="mainMenu"
|
|
||||||
>
|
|
||||||
{/* FIXME: this .split("?")[0] looks gross */}
|
|
||||||
{menuItems.map(menuItem => {
|
|
||||||
const isActive = (menuItem: IMenuItem) =>
|
|
||||||
location.split("?")[0] === orderDraftListUrl().split("?")[0] &&
|
|
||||||
menuItem.url.split("?")[0] === orderListUrl().split("?")[0]
|
|
||||||
? false
|
|
||||||
: !!matchPath(location.split("?")[0], {
|
|
||||||
exact: menuItem.url.split("?")[0] === "/",
|
|
||||||
path: menuItem.url.split("?")[0]
|
|
||||||
});
|
|
||||||
|
|
||||||
if (
|
|
||||||
menuItem.permission &&
|
|
||||||
!user.userPermissions
|
|
||||||
.map(perm => perm.code)
|
|
||||||
.includes(menuItem.permission)
|
|
||||||
) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!menuItem.url) {
|
|
||||||
const isAnyChildActive = menuItem.children.reduce(
|
|
||||||
(acc, child) => acc || isActive(child),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={classNames(classes.menuListItem, {
|
|
||||||
[classes.menuListItemActive]: isAnyChildActive
|
|
||||||
})}
|
|
||||||
key={menuItem.label}
|
|
||||||
data-testid={menuItem.testingContextId}
|
|
||||||
data-test="menuItemEntry"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className={classNames(classes.menuItemHover, {
|
|
||||||
[classes.menuListItemOpen]:
|
|
||||||
menuItem.ariaLabel === activeSubMenu.label &&
|
|
||||||
activeSubMenu.isActive
|
|
||||||
})}
|
|
||||||
onClick={() => handleSubMenu(menuItem.ariaLabel)}
|
|
||||||
>
|
|
||||||
<SVG
|
|
||||||
className={classNames(classes.menuIcon, {
|
|
||||||
[classes.menuIconDark]: isDark,
|
|
||||||
[classes.menuIconSmall]: !isMenuSmall
|
|
||||||
})}
|
|
||||||
src={menuItem.icon}
|
|
||||||
/>
|
|
||||||
<Typography
|
|
||||||
aria-label={menuItem.ariaLabel}
|
|
||||||
className={classNames(classes.menuListItemText, {
|
|
||||||
[classes.menuListItemTextHide]: !isMenuSmall
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{menuItem.label}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
<MenuNested
|
|
||||||
activeItem={activeSubMenu}
|
|
||||||
closeSubMenu={setActiveSubMenu}
|
|
||||||
menuItem={menuItem}
|
|
||||||
onMenuItemClick={onMenuItemClick}
|
|
||||||
handleSubMenu={handleSubMenu}
|
|
||||||
title={menuItem.label}
|
|
||||||
icon={menuItem.icon}
|
|
||||||
ariaLabel={menuItem.ariaLabel}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
onClick={event => closeSubMenu(null, event)}
|
|
||||||
className={classNames(classes.subMenuDrawer, {
|
|
||||||
[classes.subMenuDrawerOpen]: activeSubMenu.isActive
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
className={classNames(classes.menuListItem, {
|
|
||||||
[classes.menuListItemActive]: isActive(menuItem)
|
|
||||||
})}
|
|
||||||
href={createHref(menuItem.url)}
|
|
||||||
onClick={event => closeSubMenu(menuItem.url, event)}
|
|
||||||
key={menuItem.label}
|
|
||||||
data-testid={menuItem.testingContextId}
|
|
||||||
data-test="menuItemEntry"
|
|
||||||
>
|
|
||||||
<div className={classes.menuItemHover}>
|
|
||||||
<SVG
|
|
||||||
className={classNames(classes.menuIcon, {
|
|
||||||
[classes.menuIconDark]: isDark,
|
|
||||||
[classes.menuIconSmall]: !isMenuSmall
|
|
||||||
})}
|
|
||||||
src={menuItem.icon}
|
|
||||||
/>
|
|
||||||
<Typography
|
|
||||||
aria-label={menuItem.ariaLabel}
|
|
||||||
className={classNames(classes.menuListItemText, {
|
|
||||||
[classes.menuListItemTextHide]: !isMenuSmall
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{menuItem.label}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{renderConfigure && configurationMenu.length > 0 && (
|
|
||||||
<a
|
|
||||||
className={classes.menuListItem}
|
|
||||||
href={createHref(configurationMenuUrl)}
|
|
||||||
onClick={event => closeSubMenu(configurationMenuUrl, event)}
|
|
||||||
>
|
|
||||||
<div className={classes.menuItemHover}>
|
|
||||||
<SVG
|
|
||||||
className={classNames(classes.menuIcon, {
|
|
||||||
[classes.menuIconDark]: isDark,
|
|
||||||
[classes.menuIconSmall]: !isMenuSmall
|
|
||||||
})}
|
|
||||||
src={configureIcon}
|
|
||||||
/>
|
|
||||||
<Typography
|
|
||||||
aria-label="configuration"
|
|
||||||
className={classNames(classes.menuListItemText, {
|
|
||||||
[classes.menuListItemTextHide]: !isMenuSmall
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<FormattedMessage {...sectionNames.configuration} />
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
MenuList.displayName = "MenuList";
|
|
||||||
export default MenuList;
|
|
||||||
|
|
@ -1,194 +0,0 @@
|
||||||
import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
|
|
||||||
import Hidden from "@material-ui/core/Hidden";
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
|
||||||
import Typography from "@material-ui/core/Typography";
|
|
||||||
import useTheme from "@saleor/hooks/useTheme";
|
|
||||||
import { createHref } from "@saleor/misc";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import React from "react";
|
|
||||||
import SVG from "react-inlinesvg";
|
|
||||||
|
|
||||||
import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
|
|
||||||
import { IActiveSubMenu } from "./MenuList";
|
|
||||||
import { IMenuItem } from "./menuStructure";
|
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
|
||||||
theme => ({
|
|
||||||
menuListNested: {
|
|
||||||
background: theme.palette.background.paper,
|
|
||||||
height: "100vh",
|
|
||||||
position: "absolute",
|
|
||||||
right: 0,
|
|
||||||
top: 0,
|
|
||||||
transition: `right ${theme.transitions.duration.shorter}ms ease`,
|
|
||||||
width: drawerNestedMenuWidth,
|
|
||||||
zIndex: -1
|
|
||||||
},
|
|
||||||
menuListNestedClose: {
|
|
||||||
"& svg": {
|
|
||||||
fill: theme.palette.primary.main,
|
|
||||||
left: 11,
|
|
||||||
position: "relative",
|
|
||||||
top: 1
|
|
||||||
},
|
|
||||||
border: `solid 1px #EAEAEA`,
|
|
||||||
borderRadius: "100%",
|
|
||||||
cursor: "pointer",
|
|
||||||
height: 32,
|
|
||||||
position: "absolute",
|
|
||||||
right: 32,
|
|
||||||
top: 35,
|
|
||||||
transform: "rotate(180deg)",
|
|
||||||
width: 32
|
|
||||||
},
|
|
||||||
menuListNestedCloseDark: {
|
|
||||||
border: `solid 1px #252728`
|
|
||||||
},
|
|
||||||
menuListNestedHide: {
|
|
||||||
opacity: 0
|
|
||||||
},
|
|
||||||
menuListNestedIcon: {
|
|
||||||
"& path": {
|
|
||||||
fill: "initial"
|
|
||||||
},
|
|
||||||
"& svg": { height: 32, position: "relative", top: 7, width: 32 }
|
|
||||||
},
|
|
||||||
menuListNestedIconDark: {
|
|
||||||
"& path": {
|
|
||||||
fill: theme.palette.common.white
|
|
||||||
}
|
|
||||||
},
|
|
||||||
menuListNestedItem: {
|
|
||||||
"&:hover": {
|
|
||||||
"& p": {
|
|
||||||
color: theme.palette.primary.main
|
|
||||||
}
|
|
||||||
},
|
|
||||||
display: "block",
|
|
||||||
marginBottom: theme.spacing(2),
|
|
||||||
padding: "0px 30px",
|
|
||||||
textDecoration: "none"
|
|
||||||
},
|
|
||||||
menuListNestedOpen: {
|
|
||||||
[theme.breakpoints.down("sm")]: {
|
|
||||||
right: 0,
|
|
||||||
width: drawerWidthExpandedMobile,
|
|
||||||
zIndex: 2
|
|
||||||
},
|
|
||||||
right: -drawerNestedMenuWidth,
|
|
||||||
width: drawerNestedMenuWidth,
|
|
||||||
zIndex: -1
|
|
||||||
},
|
|
||||||
subHeader: {
|
|
||||||
borderBottom: "solid 1px #EAEAEA",
|
|
||||||
margin: "30px",
|
|
||||||
marginBottom: 39,
|
|
||||||
paddingBottom: 22
|
|
||||||
},
|
|
||||||
subHeaderDark: {
|
|
||||||
borderBottom: "solid 1px #252728"
|
|
||||||
},
|
|
||||||
subHeaderTitle: {
|
|
||||||
[theme.breakpoints.up("md")]: {
|
|
||||||
paddingLeft: 0
|
|
||||||
},
|
|
||||||
display: "inline",
|
|
||||||
paddingLeft: 10
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{ name: "MenuNested" }
|
|
||||||
);
|
|
||||||
|
|
||||||
export interface MenuNestedProps {
|
|
||||||
activeItem: IActiveSubMenu;
|
|
||||||
ariaLabel: string;
|
|
||||||
closeSubMenu: ({ isActive, label }: IActiveSubMenu) => void;
|
|
||||||
icon: string;
|
|
||||||
menuItem: IMenuItem;
|
|
||||||
title: string;
|
|
||||||
handleSubMenu: (itemLabel: string) => void;
|
|
||||||
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MenuNested: React.FC<MenuNestedProps> = props => {
|
|
||||||
const {
|
|
||||||
activeItem,
|
|
||||||
ariaLabel,
|
|
||||||
|
|
||||||
closeSubMenu,
|
|
||||||
icon,
|
|
||||||
menuItem,
|
|
||||||
onMenuItemClick,
|
|
||||||
title
|
|
||||||
} = props;
|
|
||||||
const classes = useStyles(props);
|
|
||||||
|
|
||||||
const menuItems = menuItem.children;
|
|
||||||
const { isDark } = useTheme();
|
|
||||||
const closeMenu = (menuItemUrl, event) => {
|
|
||||||
onMenuItemClick(menuItemUrl, event);
|
|
||||||
closeSubMenu({
|
|
||||||
isActive: false,
|
|
||||||
label: null
|
|
||||||
});
|
|
||||||
event.stopPropagation();
|
|
||||||
event.preventDefault();
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className={classNames(classes.menuListNested, {
|
|
||||||
[classes.menuListNestedOpen]:
|
|
||||||
activeItem.label === ariaLabel && activeItem.isActive
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
className={classNames(classes.subHeader, {
|
|
||||||
[classes.subHeaderDark]: isDark
|
|
||||||
})}
|
|
||||||
variant="h5"
|
|
||||||
>
|
|
||||||
<Hidden mdUp>
|
|
||||||
<SVG
|
|
||||||
className={classNames(classes.menuListNestedIcon, {
|
|
||||||
[classes.menuListNestedIconDark]: isDark
|
|
||||||
})}
|
|
||||||
src={icon}
|
|
||||||
/>
|
|
||||||
</Hidden>
|
|
||||||
<div className={classes.subHeaderTitle}>{title}</div>
|
|
||||||
<Hidden mdUp>
|
|
||||||
<div
|
|
||||||
className={classNames(classes.menuListNestedClose, {
|
|
||||||
[classes.menuListNestedCloseDark]: isDark
|
|
||||||
})}
|
|
||||||
data-test={ariaLabel}
|
|
||||||
onClick={() =>
|
|
||||||
closeSubMenu({
|
|
||||||
isActive: false,
|
|
||||||
label: null
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SVG src={menuArrowIcon} />
|
|
||||||
</div>
|
|
||||||
</Hidden>
|
|
||||||
</Typography>
|
|
||||||
{menuItems.map(item => (
|
|
||||||
<a
|
|
||||||
className={classNames(classes.menuListNestedItem)}
|
|
||||||
href={createHref(item.url)}
|
|
||||||
data-test={ariaLabel}
|
|
||||||
onClick={event => closeMenu(item.url, event)}
|
|
||||||
key={item.label}
|
|
||||||
>
|
|
||||||
<Typography aria-label={item.ariaLabel}>{item.label}</Typography>
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
MenuNested.displayName = "MenuNested";
|
|
||||||
export default MenuNested;
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
import Drawer from "@material-ui/core/Drawer";
|
|
||||||
import Hidden from "@material-ui/core/Hidden";
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import {
|
|
||||||
drawerWidth,
|
|
||||||
drawerWidthExpanded,
|
|
||||||
drawerWidthExpandedMobile
|
|
||||||
} from "./consts";
|
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
|
||||||
theme => ({
|
|
||||||
drawerDesktop: {
|
|
||||||
backgroundColor: theme.palette.background.paper,
|
|
||||||
border: "none",
|
|
||||||
height: "100vh",
|
|
||||||
overflow: "visible",
|
|
||||||
padding: 0,
|
|
||||||
position: "fixed" as "fixed",
|
|
||||||
transition: "width 0.3s ease",
|
|
||||||
width: drawerWidthExpanded
|
|
||||||
},
|
|
||||||
drawerDesktopSmall: {
|
|
||||||
overflow: "visible",
|
|
||||||
transition: "width 0.2s ease",
|
|
||||||
width: drawerWidth
|
|
||||||
},
|
|
||||||
drawerMobile: {
|
|
||||||
width: drawerWidthExpandedMobile
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
{ name: "ResponsiveDrawer" }
|
|
||||||
);
|
|
||||||
|
|
||||||
interface ResponsiveDrawerProps {
|
|
||||||
children?: React.ReactNode;
|
|
||||||
open: boolean;
|
|
||||||
small: boolean;
|
|
||||||
onClose?();
|
|
||||||
}
|
|
||||||
|
|
||||||
const ResponsiveDrawer: React.FC<ResponsiveDrawerProps> = props => {
|
|
||||||
const { children, onClose, open, small } = props;
|
|
||||||
|
|
||||||
const classes = useStyles(props);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Hidden smDown>
|
|
||||||
<Drawer
|
|
||||||
variant="persistent"
|
|
||||||
open
|
|
||||||
classes={{
|
|
||||||
paper: small ? classes.drawerDesktop : classes.drawerDesktopSmall
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Drawer>
|
|
||||||
</Hidden>
|
|
||||||
<Hidden mdUp>
|
|
||||||
<Drawer
|
|
||||||
variant="temporary"
|
|
||||||
onClose={onClose}
|
|
||||||
open={open}
|
|
||||||
classes={{ paper: classes.drawerMobile }}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</Drawer>
|
|
||||||
</Hidden>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default ResponsiveDrawer;
|
|
||||||
Loading…
Reference in a new issue