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 67 68 69 70 71 | 61x 16x 16x 16x 16x 16x 12x 12x 2x 10x 16x 24x | import React, { useState } from 'react';
import { Link } from 'react-router-dom/';
import Box from '@material-ui/core/Box';
import Collapse from '@material-ui/core/Collapse';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography';
import ExpandLessRounded from '@material-ui/icons/ExpandLessRounded';
import ExpandMoreRounded from '@material-ui/icons/ExpandMoreRounded';
import useStyles from './styles';
const DropdownList = ({ linkClickHandler, header, links, route }) => {
const classes = useStyles();
const [open, setOpen] = useState(false);
const toggleList = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClick = () => {
setOpen(false);
linkClickHandler();
};
const LinkComponent = ({ link }) => {
const { header, isExternal, route } = link;
if (isExternal) {
return (
<a style={{ textDecoration: 'none' }} href={route} onClick={handleClick}>
{header}
</a>
);
} else {
return (
<Link style={{ textDecoration: 'none' }} to={route} onClick={handleClick}>
{header}
</Link>
);
}
};
return (
<>
<Box className={classes.dropdownHeader} onClick={toggleList}>
<Typography
// component={Link} to={route} // uncomment to create Menu header as link
variant='body2'
color='textSecondary'
style={{ cursor: 'pointer', fontWeight: 'bold', textDecoration: 'none' }}
>
{header}
</Typography>
{open ? <ExpandLessRounded color='secondary' /> : <ExpandMoreRounded color='primary' />}
</Box>
<Collapse in={open} className={classes.collapse}>
<List dense disablePadding>
{links.map((link, index) => {
return (
<ListItem dense disableGutters key={index}>
<LinkComponent link={link} />
</ListItem>
);
})}
</List>
</Collapse>
</>
);
};
export default DropdownList;
|