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    position: 'relative',
38    margin: `${theme.spacing(3)}px auto`,
39    width: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
40    height: `calc(${theme.mixins.toolbar.minHeight}px - 16px)`,
41    textAlign: 'center',
42    color: active
43      ? theme.palette.background.default
44      : 'rgba(256, 256, 256, .76)',
45
46    [theme.breakpoints.down('sm')]: {
47      margin: '0 auto',
48    },
49  }),
50  drawerText: {
51    position: 'relative',
52    fontSize: '11px',
53    lineHeight: '1.1em',
54    height: 'auto',
55    display: 'flex',
56    justifyContent: 'center',
57    textTransform: 'none',
58
59    [theme.breakpoints.down('sm')]: {
60      whiteSpace: 'nowrap',
61      lineHeight: '.5em',
62    },
63  },
64}));
65
66export default useStyles;