Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: enable arrow key nav in header menus (#900)

Browse Source 
* fix: enable arrow key nav in header menus

* refactor: improve MUI style override
This commit is contained in:
olav 2022-04-22 12:51:06 +02:00 committed by GitHub
parent 3bb5a69d86
commit 629df7ee26
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/menu/Header/Header.tsx
View File

@ -16,7 +16,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useCommonStyles } from 'themes/commonStyles'; import { useCommonStyles } from 'themes/commonStyles';
import { ADMIN } from 'component/providers/AccessProvider/permissions'; import { ADMIN } from 'component/providers/AccessProvider/permissions';
import { IPermission } from 'interfaces/user'; import { IPermission } from 'interfaces/user';
import NavigationMenu from './NavigationMenu/NavigationMenu'; import { NavigationMenu } from './NavigationMenu/NavigationMenu';
import { getRoutes } from 'component/menu/routes'; import { getRoutes } from 'component/menu/routes';
import { KeyboardArrowDown } from '@material-ui/icons'; import { KeyboardArrowDown } from '@material-ui/icons';
import { filterByFlags } from 'component/common/util'; import { filterByFlags } from 'component/common/util';

42
frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
View File

@ -1,5 +1,6 @@
import { Popover, List } from '@material-ui/core'; import { Menu, MenuItem } from '@material-ui/core';
import NavigationLink from '../NavigationLink/NavigationLink'; import { Link } from 'react-router-dom';
import { useStyles } from '../NavigationLink/NavigationLink.styles';
interface INavigationMenuProps { interface INavigationMenuProps {
options: any[]; options: any[];
@ -9,36 +10,37 @@ interface INavigationMenuProps {
style: Object; style: Object;
} }
const NavigationMenu = ({ export const NavigationMenu = ({
options, options,
id, id,
handleClose, handleClose,
anchorEl, anchorEl,
style, style,
}: INavigationMenuProps) => { }: INavigationMenuProps) => {
const styles = useStyles();
return ( return (
<Popover <Menu
id={id} id={id}
onClose={handleClose} onClose={handleClose}
anchorEl={anchorEl} anchorEl={anchorEl}
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onMouseLeave={handleClose}
style={style} style={style}
> >
<List> {options.map(option => {
{options.map(option => { return (
return ( <MenuItem
<NavigationLink key={option.path}
key={option.path} component={Link}
handleClose={handleClose} to={option.path}
path={option.path} onClick={handleClose}
text={option.title} classes={{ root: styles.navMenuLink }}
/> >
); <span className={styles.menuItemBox} />
})} {option.title}
</List> </MenuItem>
</Popover> );
})}
</Menu>
); );
}; };
export default NavigationMenu;