frontend/containers/DrawerMenu/styles.ts (view raw)
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;