1import {makeStyles} from '@material-ui/core/styles';
 2
 3const useStyles = makeStyles(theme => ({
 4  drawer: () => ({
 5    width: '85px',
 6
 7    [theme.breakpoints.down('sm')]: {
 8      width: '100%',
 9    },
10
11    '& .MuiDrawer-paper': {
12      paddingTop: theme.mixins.toolbar.minHeight,
13      zIndex: theme.zIndex.appBar - 1,
14      width: '84px',
15      display: 'flex',
16      flexDirection: 'column',
17      boxSizing: 'border-box',
18      left: 0,
19      top: 0,
20      backgroundColor: theme.overrides.MuiAppBar.colorPrimary.backgroundColor,
21      color: theme.overrides.MuiAppBar.colorPrimary.color,
22      overflowX: 'hidden',
23      position: 'static',
24
25      [theme.breakpoints.down('sm')]: {
26        bottom: 0,
27        top: 'auto',
28        paddingTop: 0,
29        height: '56px',
30        width: '100%',
31        flexDirection: 'row',
32      },
33    },
34  }),
35  icon: {
36    position: 'relative',
37    display: 'block',
38    width: '100%',
39    height: '100%',
40    padding: 0,
41  },
42  drawerMenuButton: ({active}) => ({
43    display: 'block',
44    position: 'relative',
45    minWidth: 0,
46    margin: 0,
47    width: '84px',
48    height: '84px',
49    textAlign: 'center',
50    color: active
51      ? theme.palette.background.default
52      : 'rgba(256, 256, 256, .76)',
53
54    [theme.breakpoints.down('sm')]: {
55      margin: '0 auto',
56      height: '56px',
57      width: '100%',
58    },
59  }),
60  drawerText: {
61    position: 'relative',
62    fontSize: '11px',
63    lineHeight: '1.1em',
64    height: 'auto',
65    display: 'flex',
66    justifyContent: 'center',
67    textTransform: 'none',
68
69    [theme.breakpoints.down('sm')]: {
70      whiteSpace: 'nowrap',
71      lineHeight: '.5em',
72    },
73  },
74}));
75
76export default useStyles;