Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 61x 61x 4752x 4752x 4752x 2376x | import * as React from 'react';
import { NavLink as NaviLink, withRouter } from 'react-router-dom';
import Link from '@material-ui/core/Link';
import { useTheme, withStyles } from '@material-ui/core/styles';
import { usePopupState, bindMenu, bindHover } from 'material-ui-popup-state/hooks';
import Menu from 'material-ui-popup-state/HoverMenu';
const styles = () => ({
menu: {
padding: '0',
},
popover: {
padding: '0',
},
paper: {
paddingTop: '1rem',
},
});
const NavLink = ({ children, classes, header, matchPathParent, route }) => {
const popupState = usePopupState({ variant: 'popper', popupId: 'navlink' });
const theme = useTheme();
return (
<>
<Link
{...bindHover(popupState)}
underline='none'
component={NaviLink}
to={route}
exact
isActive={() => {
return route === matchPathParent;
}}
activeStyle={{
color: theme.palette.primary.main,
fontWeight: 'bold',
}}
classes={{ root: classes.link }}
>
{header}
</Link>
<Menu
{...bindMenu(popupState)}
onClick={popupState.close}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
classes={{ paper: classes.paper, list: classes.menu }}
PopoverClasses={{ paper: classes.popover }}
elevation={0}
>
<div>{children}</div>
</Menu>
</>
);
};
export default withRouter(withStyles(styles)(NavLink));
|