How can I prevent an MUI accordion in an appBar from moving up and hiding behind the browser's bookmark bar when expanded?
const useStyles = makeStyles((theme)) => {
appBar: {
borderBottom: "2px solid #D2D2D2",
backgroundColor: "#fff",
marginTop: "0px",
height: "2.8vw",
},
appBarAcc: {
// display: "flex", // Causes the accordion to expand horizontally
flexDirection: "column",
width: "auto",
// padding: "0.8vw 0.4vw",
"&:hover": {
backgroundColor: "#B6B6B6",
},
},
}
...
<AppBar position="static" className={classes.appBar} elevation={0}>
<Toolbar variant="dense">
<Accordion className={classes.appBarAcc} elevation={0} TransitionProps={{ unmountOnExit: true }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<NotificationsNoneIcon
style={{ color: "#636363", marginRight: "0.4vw", fontSize: "large", justifyContent: "center" }}
/>
<Typography>Notifications</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>No notifications</Typography>
</AccordionDetails>
</Accordion>
</Toolbar>
</AppBar>