diff --git a/ui/src/layout/Menu.js b/ui/src/layout/Menu.js index 899e634c9..745156248 100644 --- a/ui/src/layout/Menu.js +++ b/ui/src/layout/Menu.js @@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({ }), }, open: { - width: 200, + width: 240, }, closed: { width: 55, @@ -44,7 +44,7 @@ const translatedResourceName = (resource, translate) => : inflection.humanize(inflection.pluralize(resource.name)), }) -const Menu = ({ onMenuClick, dense }) => { +const Menu = ({ dense = false }) => { const open = useSelector((state) => state.admin.ui.sidebarOpen) const translate = useTranslate() const classes = useStyles() @@ -68,7 +68,6 @@ const Menu = ({ onMenuClick, dense }) => { activeClassName={classes.active} primaryText={translatedResourceName(resource, translate)} leftIcon={resource.icon || } - onClick={onMenuClick} sidebarIsOpen={open} dense={dense} /> @@ -93,7 +92,6 @@ const Menu = ({ onMenuClick, dense }) => { activeClassName={classes.active} primaryText={name} leftIcon={al.icon || } - onClick={onMenuClick} sidebarIsOpen={open} dense={dense} exact diff --git a/ui/src/layout/SubMenu.js b/ui/src/layout/SubMenu.js index 4e389a2c6..c62f08690 100644 --- a/ui/src/layout/SubMenu.js +++ b/ui/src/layout/SubMenu.js @@ -14,12 +14,16 @@ const useStyles = makeStyles( (theme) => ({ icon: { minWidth: theme.spacing(5) }, sidebarIsOpen: { - paddingLeft: 25, - transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms', + '& a': { + transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms', + paddingLeft: theme.spacing(4), + }, }, sidebarIsClosed: { - paddingLeft: 0, - transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms', + '& a': { + transition: 'padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms', + paddingLeft: theme.spacing(2), + }, }, }), {