1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import React, { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import {
Typography,
Divider,
Drawer,
makeStyles,
IconButton,
Hidden,
} from '@material-ui/core';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import SideNav from '../../components/SideNav';
import NavBar from '../../components/NavBar';
import t from '../../common/localization';
import useRoutes from './useRoutes';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
height: '100%',
},
drawerContainer: {
width: theme.dimensions.drawerWidthDesktop,
},
drawer: {
width: theme.dimensions.drawerWidthDesktop,
[theme.breakpoints.down('md')]: {
width: theme.dimensions.drawerWidthTablet,
},
},
content: {
flex: 1,
padding: theme.spacing(5, 3, 3, 3),
[theme.breakpoints.down('md')]: {
paddingTop: theme.spacing(10),
},
},
drawerHeader: {
...theme.mixins.toolbar,
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
},
toolbar: {
[theme.breakpoints.down('md')]: {
...theme.mixins.toolbar,
},
},
}));
const OptionsLayout = ({ children }) => {
const classes = useStyles();
const location = useLocation();
const [openDrawer, setOpenDrawer] = useState(false);
const [optionTitle, setOptionTitle] = useState();
const routes = useRoutes();
useEffect(() => {
const activeRoute = routes.find(
(route) => route.href && location.pathname.match(route.match || route.href),
);
setOptionTitle(activeRoute?.name);
}, [location, routes]);
const title = `${t('settingsTitle')} / ${optionTitle}`;
return (
<div className={classes.root}>
<Hidden lgUp>
<NavBar setOpenDrawer={setOpenDrawer} title={title} />
<Drawer
variant="temporary"
open={openDrawer}
onClose={() => setOpenDrawer(!openDrawer)}
classes={{ paper: classes.drawer }}
>
<SideNav routes={routes} />
</Drawer>
</Hidden>
<Hidden mdDown>
<Drawer
variant="permanent"
classes={{ root: classes.drawerContainer, paper: classes.drawer }}
>
<div className={classes.drawerHeader}>
<IconButton component="a" href="/">
<ArrowBackIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
{t('settingsTitle')}
</Typography>
</div>
<Divider />
<SideNav routes={routes} />
</Drawer>
</Hidden>
<div className={classes.content}>{children}</div>
</div>
);
};
export default OptionsLayout;
|
