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 | 61x 8x 8x 8x 8x | import React, { useState } from 'react';
import { Link } from 'react-router-dom/';
import Box from '@material-ui/core/Box';
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 = ({ header, links, route }) => {
const [open, setOpen] = useState(false);
const classes = useStyles();
const toggleList = () => {
setOpen(!open);
};
return (
<>
<Box className={classes.dropdownHeader} onClick={links.length ? toggleList : null}>
<Typography
variant='body2'
color='textSecondary'
component={Link}
to={route}
>{header}
</Typography>
{links.length > 0 && (open ? <ExpandLessRounded /> : <ExpandMoreRounded />)}
</Box>
{open &&
links.map((link) => {
return link.isExternal ? (
<a key={link.id} href={link.route}>{link.header}</a>
) : (
<Link key={link.id} to={link.route}>{link.header}</Link>
);
})
}
</>
);
};
export default DropdownList;
|