Just finished creating this accordion which will be used as a menu item.
However, I've encountered an issue where clicking on the Main title causes the accordion summary to move downward vertically.
Any suggestions on how to keep the Main tile fixed while opening?
import React from "react";
import {
Typography,
Grid,
Accordion,
AccordionSummary,
AccordionDetails,
ListItem
} from "@material-ui/core";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
panelSummary: {
flexDirection: "row-reverse",
paddingLeft: "0px"
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular
},
innerMenuItem: {
paddingLeft: "32px"
},
expanded: {
padding: "0px"
}
})
);
export default function App() {
const classes = useStyles();
return (
<Accordion>
<AccordionSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>Main title</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid container direction="column">
<ListItem className={classes.innerMenuItem} button key={1}>
<Typography className={classes.heading}>Sub Item 1</Typography>
</ListItem>
<ListItem
className={classes.innerMenuItem}
button
key={2}>
<Typography className={classes.heading}>Sub Item 2</Typography>
</ListItem>
</Grid>
</AccordionDetails>
</Accordion>
);
}