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