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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import React, { useState } from 'react';
import {
AppBar,
Breadcrumbs,
Divider,
Drawer,
Hidden,
IconButton,
Toolbar,
Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import MenuIcon from '@mui/icons-material/Menu';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from './LocalizationProvider';
const useStyles = makeStyles((theme) => ({
desktopRoot: {
height: '100%',
display: 'flex',
},
mobileRoot: {
height: '100%',
display: 'flex',
flexDirection: 'column',
},
desktopDrawer: {
width: theme.dimensions.drawerWidthDesktop,
},
mobileDrawer: {
width: theme.dimensions.drawerWidthTablet,
},
desktopToolbar: theme.mixins.toolbar,
mobileToolbar: {
zIndex: 1,
},
content: {
flexGrow: 1,
alignItems: 'stretch',
display: 'flex',
flexDirection: 'column',
overflow: 'auto',
},
}));
const PageTitle = ({ breadcrumbs }) => {
const theme = useTheme();
const t = useTranslation();
const desktop = useMediaQuery(theme.breakpoints.up('md'));
if (desktop) {
return (
<Typography variant="h6" noWrap>{t(breadcrumbs.at(0))}</Typography>
);
}
return (
<Breadcrumbs>
{breadcrumbs.slice(0, -1).map((breadcrumb) => (
<Typography variant="h6" color="inherit" key={breadcrumb}>{t(breadcrumb)}</Typography>
))}
<Typography variant="h6" color="textPrimary">{t(breadcrumbs.at(-1))}</Typography>
</Breadcrumbs>
);
};
const PageLayout = ({ menu, breadcrumbs, children }) => {
const classes = useStyles();
const navigate = useNavigate();
const [openDrawer, setOpenDrawer] = useState(false);
return (
<>
<Hidden mdDown>
<div className={classes.desktopRoot}>
<Drawer
variant="permanent"
className={classes.desktopDrawer}
classes={{ paper: classes.desktopDrawer }}
>
<div className={classes.toolbar}>
<Toolbar>
<IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => navigate('/')}>
<ArrowBackIcon />
</IconButton>
<PageTitle breadcrumbs={breadcrumbs} />
</Toolbar>
</div>
<Divider />
{menu}
</Drawer>
<div className={classes.content}>{children}</div>
</div>
</Hidden>
<Hidden mdUp>
<div className={classes.mobileRoot}>
<Drawer
variant="temporary"
open={openDrawer}
onClose={() => setOpenDrawer(false)}
classes={{ paper: classes.mobileDrawer }}
>
{menu}
</Drawer>
<AppBar className={classes.mobileToolbar} position="static" color="inherit">
<Toolbar>
<IconButton color="inherit" edge="start" sx={{ mr: 2 }} onClick={() => setOpenDrawer(true)}>
<MenuIcon />
</IconButton>
<PageTitle breadcrumbs={breadcrumbs} />
</Toolbar>
</AppBar>
<div className={classes.content}>{children}</div>
</div>
</Hidden>
</>
);
};
export default PageLayout;
|
