frontend/containers/DrawerMenu/index.tsx (view raw)
1import Drawer from '@mui/material/Drawer';
2import {useTheme} from '@mui/material/styles';
3import Icon from '@mui/material/Icon';
4import {useTranslation} from 'react-i18next';
5import {useRouter} from 'next/router';
6import DrawerMenuItem from './DrawerMenuItem';
7
8const DrawerMenu = () => {
9 const {t} = useTranslation();
10 const theme = useTheme();
11
12 const router = useRouter();
13 const {
14 query: {uuid},
15 } = router;
16
17 return (
18 <Drawer
19 variant="permanent"
20 sx={{
21 width: '85px',
22
23 [theme.breakpoints.down('md')]: {
24 width: '100%',
25 position: 'fixed',
26 bottom: 0,
27 zIndex: 1,
28 },
29
30 '& .MuiDrawer-paper': {
31 zIndex: theme.zIndex.appBar - 1,
32 width: '84px',
33 display: 'flex',
34 flexDirection: 'column',
35 boxSizing: 'border-box',
36 left: 0,
37 top: 0,
38 backgroundColor: '#242424',
39 color: 'white',
40 overflowX: 'hidden',
41 position: 'static',
42
43 [theme.breakpoints.down('md')]: {
44 bottom: 0,
45 top: 'auto',
46 paddingTop: 0,
47 height: '56px',
48 width: '100%',
49 flexDirection: 'row',
50 },
51 },
52 }}
53 >
54 <DrawerMenuItem
55 title={t('drawer.travels')}
56 onClick={() => {
57 router.push(`/e/${uuid}`, null, {shallow: true});
58 }}
59 Icon={<Icon>directions_car</Icon>}
60 active={router.pathname == `/e/[uuid]`}
61 />
62 <DrawerMenuItem
63 title={t('drawer.waitingList')}
64 onClick={() => {
65 router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
66 }}
67 Icon={<Icon>group</Icon>}
68 active={router.pathname == `/e/[uuid]/waitingList`}
69 />
70 <DrawerMenuItem
71 title={t('drawer.information')}
72 onClick={() => {
73 router.push(`/e/${uuid}/details`, null, {shallow: true});
74 }}
75 Icon={<Icon>info</Icon>}
76 active={router.pathname == `/e/[uuid]/details`}
77 />
78 </Drawer>
79 );
80};
81
82export default DrawerMenu;