Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +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 { ADMIN } from 'component/providers/AccessProvider/permissions';
import { IPermission } from 'interfaces/user';
import NavigationMenu from './NavigationMenu/NavigationMenu';
import { NavigationMenu } from './NavigationMenu/NavigationMenu';
import { getRoutes } from 'component/menu/routes';
import { KeyboardArrowDown } from '@material-ui/icons';
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 NavigationLink from '../NavigationLink/NavigationLink';
import { Menu, MenuItem } from '@material-ui/core';
import { Link } from 'react-router-dom';
import { useStyles } from '../NavigationLink/NavigationLink.styles';
interface INavigationMenuProps {
options: any[];
@ -9,36 +10,37 @@ interface INavigationMenuProps {
style: Object;
}
const NavigationMenu = ({
export const NavigationMenu = ({
options,
id,
handleClose,
anchorEl,
style,
}: INavigationMenuProps) => {
const styles = useStyles();
return (
<Popover
<Menu
id={id}
onClose={handleClose}
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onMouseLeave={handleClose}
style={style}
>
<List>
{options.map(option => {
return (
<NavigationLink
key={option.path}
handleClose={handleClose}
path={option.path}
text={option.title}
/>
);
})}
</List>
</Popover>
{options.map(option => {
return (
<MenuItem
key={option.path}
component={Link}
to={option.path}
onClick={handleClose}
classes={{ root: styles.navMenuLink }}
>
<span className={styles.menuItemBox} />
{option.title}
</MenuItem>
);
})}
</Menu>
);
};
export default NavigationMenu;