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