Verified Commit 8949f0b4 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Enhance mobile menu behavior

* Close mobile menu when clicking on the submenu item of the currently
active page
parent 9dfe15ac
Pipeline #58443 passed with stages
in 9 minutes and 56 seconds
......@@ -176,6 +176,12 @@ const Header = ({ className }) => {
setShowMobileMenu(!showMobileMenu)
}
const handleMobileMenuClose = () => {
// reset persisted value
persistedMobileMenuShowing = false
setShowMobileMenu(!showMobileMenu)
}
const handleKeyPress = event => {
if (event.keyCode === 27) {
persistedMobileMenuShowing = false
......@@ -192,6 +198,7 @@ const Header = ({ className }) => {
<MainMenu
className={classes.mainMenu}
preventMobileMenuClosing={preventMobileMenuClosing}
closeMobileMenu={handleMobileMenuClose}
/>
<NoSsr>
<ProfileMenu
......
......@@ -209,7 +209,7 @@ const useStyles = makeStyles(
{ name: 'mainMenu' }
)
const MainMenu = ({ className, preventMobileMenuClosing }) => {
const MainMenu = ({ className, preventMobileMenuClosing, closeMobileMenu }) => {
const classes = useStyles()
const isItemActive = ({ path, submenu }, currentLocation) => {
......@@ -265,7 +265,11 @@ const MainMenu = ({ className, preventMobileMenuClosing }) => {
{(() => {
if (subitem.path) {
return (
<Link to={subitem.path} underline="none">
<Link
to={subitem.path}
underline="none"
onClick={closeMobileMenu}
>
<FormattedMessage id={subitem.label} />
</Link>
)
......@@ -274,6 +278,7 @@ const MainMenu = ({ className, preventMobileMenuClosing }) => {
<ExternalLink
href={subitem.url}
underline="none"
onClick={closeMobileMenu}
>
<FormattedMessage id={subitem.label} />
</ExternalLink>
......@@ -297,6 +302,7 @@ const MainMenu = ({ className, preventMobileMenuClosing }) => {
MainMenu.propTypes = {
className: PropTypes.string,
preventMobileMenuClosing: PropTypes.func.isRequired,
closeMobileMenu: PropTypes.func.isRequired,
}
export default MainMenu
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment