diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 5358c451a..2f6041ee2 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -85,67 +85,6 @@ const useStyles = makeStyles( height: "100vh", padding: "25px 20px" }, - menuIcon: { - "& span": { - "&:nth-child(1)": { - top: 15 - }, - "&:nth-child(2), &:nth-child(3)": { - top: 20 - }, - "&:nth-child(4)": { - top: 25 - }, - background: theme.palette.secondary.light, - display: "block", - height: 1, - left: "20%", - opacity: 1, - position: "absolute", - transform: "rotate(0deg)", - transition: ".25s ease-in-out", - width: "60%" - }, - [theme.breakpoints.up("md")]: { - display: "none" - }, - [theme.breakpoints.down("sm")]: { - left: 0 - }, - background: theme.palette.background.paper, - borderRadius: "50%", - cursor: "pointer", - height: 42, - left: theme.spacing(), - marginRight: theme.spacing(2), - position: "relative", - transform: "rotate(0deg)", - transition: `${theme.transitions.duration.shorter}ms ease-in-out`, - width: 42 - }, - menuIconDark: { - "& span": { - background: theme.palette.common.white - } - }, - menuIconOpen: { - "& span": { - "&:nth-child(1), &:nth-child(4)": { - left: "50%", - top: 20, - width: 0 - }, - "&:nth-child(2)": { - transform: "rotate(45deg)" - }, - "&:nth-child(3)": { - transform: "rotate(-45deg)" - } - }, - left: 280, - position: "absolute", - zIndex: 1999 - }, menuSmall: { background: theme.palette.background.paper, height: "100vh", @@ -212,7 +151,6 @@ interface AppLayoutProps { const AppLayout: React.FC = ({ children }) => { const classes = useStyles({}); const { isDark, toggleTheme } = useTheme(); - const [isDrawerOpened, setDrawerState] = React.useState(false); const [isMenuOpened, setMenuState] = React.useState(false); const appActionAnchor = React.useRef(); const appHeaderAnchor = React.useRef(); @@ -247,13 +185,6 @@ const AppLayout: React.FC = ({ children }) => { navigate(staffMemberDetailsUrl(user.id)); }; - const handleMenuItemClick = (url: string, event: React.MouseEvent) => { - event.stopPropagation(); - event.preventDefault(); - setDrawerState(false); - navigate(url); - }; - const handleErrorBack = () => { navigate("/"); dispatchAppState({ @@ -278,7 +209,7 @@ const AppLayout: React.FC = ({ children }) => { location={location.pathname} user={user} renderConfigure={renderConfigure} - onMenuItemClick={handleMenuItemClick} + onMenuItemClick={navigate} />
{appState.loading ? ( @@ -290,18 +221,6 @@ const AppLayout: React.FC = ({ children }) => {
-
setDrawerState(!isDrawerOpened)} - > - - - - -
diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 6ab7acfc8..897a87faf 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -4,6 +4,7 @@ import Popper from "@material-ui/core/Popper"; import { fade } from "@material-ui/core/styles/colorManipulator"; import makeStyles from "@material-ui/core/styles/makeStyles"; import Typography from "@material-ui/core/Typography"; +import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; @@ -14,7 +15,7 @@ export interface MenuItemProps { active: boolean; isMenuShrunk: boolean; menuItem: IMenuItem; - onClick: (url: string, event: React.MouseEvent) => void; + onClick: UseNavigatorResult; } export const menuWidth = 210; @@ -51,6 +52,7 @@ const useStyles = makeStyles( background: "none", border: "none", color: "inherit", + cursor: "pointer", display: "inline-flex", margin: 0, padding: 0 @@ -126,10 +128,11 @@ const MenuItem: React.FC = ({ const anchor = React.useRef(null); const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => { + event.stopPropagation(); if (menuItem.children) { setOpen(true); } else { - onClick(menuItem.url, event); + onClick(menuItem.url); setOpen(false); } }; @@ -174,10 +177,7 @@ const MenuItem: React.FC = ({ component="button" className={classNames(classes.label, classes.subMenuLabel)} key={subMenuItem.url} - onClick={event => { - event.preventDefault(); - handleClick(event, subMenuItem); - }} + onClick={event => handleClick(event, subMenuItem)} data-test="submenu-item-label" data-test-id={subMenuItem.testingContextId} variant="body2" diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 3edd12db8..04570317e 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -4,6 +4,7 @@ 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 { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; import classNames from "classnames"; import React from "react"; @@ -46,7 +47,7 @@ export interface SideBarProps { location: string; user: User; renderConfigure: boolean; - onMenuItemClick: (url: string, event: React.MouseEvent) => void; + onMenuItemClick: UseNavigatorResult; } export interface IActiveSubMenu {