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),
+ },
},
}),
{