1import {makeStyles} from '@material-ui/core/styles';
 2
 3const useStyles = makeStyles(theme => ({
 4  drawer: ({bannerOffset}) => ({
 5    width: '85px',
 6    flexShrink: 0,
 7    '& .MuiDrawer-paper': {
 8      paddingTop: theme.mixins.toolbar.minHeight + bannerOffset,
 9      zIndex: theme.zIndex.appBar - 1,
10      width: '84px',
11      display: 'flex',
12      flexDirection: 'column',
13      boxSizing: 'border-box',
14      left: 0,
15      top: 0,
16      backgroundColor: theme.overrides.MuiAppBar.colorPrimary.backgroundColor,
17      color: theme.overrides.MuiAppBar.colorPrimary.color,
18
19      [theme.breakpoints.down('sm')]: {
20        bottom: 0,
21        top: 'auto',
22        paddingTop: 0,
23        height: '56px',
24        width: '100%',
25        flexDirection: 'row',
26      },
27    },
28  }),
29  button: {
30    width: '100%',
31    height: '100%',
32    minWidth: 0,
33    padding: 0,
34    borderRadius: '50%',
35  },
36  drawerMenuItem: ({active}) => ({
37    margin: `${theme.spacing(3)}px auto`,
38    width: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
39    height: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
40    textAlign: 'center',
41    color: active ? '#fff' : 'rgba(256, 256, 256, .76)',
42
43    [theme.breakpoints.down('sm')]: {
44      margin: '0 auto',
45    },
46  }),
47  drawerText: {
48    fontSize: '0.7em',
49    lineHeight: '1.1em',
50    display: 'flex',
51    justifyContent: 'center',
52    textTransform: 'none',
53
54    [theme.breakpoints.down('sm')]: {
55      whiteSpace: 'nowrap',
56    },
57  },
58}));
59
60export default useStyles;