import { createStyles, makeStyles } from "@material-ui/styles"; const drawerWidth = 240; const useStyles = makeStyles(({ palette, breakpoints, mixins }) => createStyles({ sidebarBase: { display: "inline-box", textDecoration: "none", color: "black", width: "100%", }, sidebarSectionNormal: { fontSize: "1.5em", fontWeight: "bold", }, sidebarSectionHighlight: { fontSize: "1.5em", fontWeight: "bold", color: palette.primary.main, borderLeft: "0.25rem solid" }, sidebarItemNormal: { fontSize: "1.2em", }, sidebarItemHighlight: { fontSize: "1.2em", color: palette.primary.main, borderLeft: "0.25rem solid" }, drawer: { [breakpoints.up('sm')]: { width: drawerWidth, flexShrink: 0, }, width: drawerWidth, flexShrink: 0, }, drawerContainer: { overflow: 'auto', }, toolbar: mixins.toolbar, titleLink: { textDecoration: 'none', "&:visited": { color: palette.primary.main, }, "&:hover": { color: "green" } } }), ); export default useStyles;