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  icon: {
30    position: 'relative',
31    display: 'block',
32    width: '100%',
33    height: '100%',
34    padding: 0,
35  },
36  drawerMenuButton: ({active}) => ({
37    display: 'block',
38    position: 'relative',
39    minWidth: 0,
40    margin: 0,
41    width: '84px',
42    height: '84px',
43    textAlign: 'center',
44    color: active
45      ? theme.palette.background.default
46      : 'rgba(256, 256, 256, .76)',
47
48    [theme.breakpoints.down('sm')]: {
49      margin: '0 auto',
50      height: '56px',
51      width: '100%',
52    },
53  }),
54  drawerText: {
55    position: 'relative',
56    fontSize: '11px',
57    lineHeight: '1.1em',
58    height: 'auto',
59    display: 'flex',
60    justifyContent: 'center',
61    textTransform: 'none',
62
63    [theme.breakpoints.down('sm')]: {
64      whiteSpace: 'nowrap',
65      lineHeight: '.5em',
66    },
67  },
68}));
69
70export default useStyles;