import { fade, makeStyles } from "@material-ui/core/styles"; const drawerWidth = 200; export const useStyles = makeStyles((theme) => ({ grow: { flexGrow: 1, marginBottom: "4rem", }, title: { display: "none", [theme.breakpoints.up("sm")]: { display: "block", }, color: "white", }, search: { position: "relative", borderRadius: theme.shape.borderRadius, backgroundColor: fade(theme.palette.common.white, 0.15), "&:hover": { backgroundColor: fade(theme.palette.common.white, 0.25), }, marginRight: theme.spacing(2), marginLeft: 0, width: "100%", [theme.breakpoints.up("sm")]: { marginLeft: theme.spacing(3), maxWidth: '210px', }, }, searchIcon: { padding: theme.spacing(0, 2), height: "100%", position: "absolute", pointerEvents: "none", display: "flex", alignItems: "center", justifyContent: "center", }, inputRoot: { marginLeft: '48px' }, inputInput: { padding: theme.spacing(1, 1, 1, 0), // vertical padding + font size from searchIcon paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create("width"), width: "100%", color: "white", [theme.breakpoints.up("md")]: { width: "20ch", }, }, endAdornment:{ color: "white", }, sectionDesktop: { display: "none", [theme.breakpoints.up("md")]: { display: "flex", }, }, sectionMobile: { display: "flex", [theme.breakpoints.up("md")]: { display: "none", }, }, root: { display: "flex", }, drawer: { [theme.breakpoints.up("sm")]: { width: drawerWidth, flexShrink: 0, }, }, appBar: { [theme.breakpoints.up("sm")]: { width: `calc(100% - ${drawerWidth}px)`, marginLeft: drawerWidth, }, background: "#171c25", }, link: { color: "#292a36", }, menuButton: { marginRight: theme.spacing(2), [theme.breakpoints.up("sm")]: { display: "none", }, }, // necessary for content to be below app bar toolbar: theme.mixins.toolbar, drawerPaper: { width: drawerWidth, }, content: { marginTop: "2em", flexGrow: 1, padding: theme.spacing(3), }, }));