frontend/containers/DrawerMenu/index.tsx (view raw)
1import Link from 'next/link';
2import Drawer from '@mui/material/Drawer';
3import Box from '@mui/material/Box';
4import {useTheme} from '@mui/material/styles';
5import {useTranslation} from 'next-i18next';
6import {useRouter} from 'next/router';
7import useProfile from '../../hooks/useProfile';
8import DrawerMenuItem from './DrawerMenuItem';
9import useEventStore from '../../stores/useEventStore';
10
11interface Props {
12 eventUuid: string;
13}
14
15const DrawerMenu = ({eventUuid}: Props) => {
16 const {t} = useTranslation();
17 const theme = useTheme();
18
19 const event = useEventStore(s => s.event);
20 const {connected} = useProfile();
21 const appLink = connected ? '/dashboard' : `/e/${eventUuid}` || '';
22 const isCarosterPlusEvent = event?.enabled_modules?.includes('caroster-plus');
23
24 const router = useRouter();
25 const {
26 query: {uuid},
27 } = router;
28
29 return (
30 <Drawer
31 variant="permanent"
32 sx={{
33 width: '240px',
34
35 [theme.breakpoints.down('md')]: {
36 width: '100%',
37 position: 'fixed',
38 bottom: 0,
39 zIndex: 1,
40 },
41
42 '& .MuiDrawer-paper': {
43 zIndex: theme.zIndex.appBar - 1,
44 width: '239px',
45 display: 'flex',
46 flexDirection: 'column',
47 boxSizing: 'border-box',
48 left: 0,
49 top: 0,
50 color: 'white',
51 overflowX: 'hidden',
52 position: 'static',
53
54 [theme.breakpoints.down('md')]: {
55 bottom: 0,
56 top: 'auto',
57 paddingTop: 0,
58 height: '80px',
59 width: '100%',
60 flexDirection: 'row',
61 boxShadow: '0px -3px 8px 0px rgba(0, 0, 0, 0.08)',
62 },
63 },
64 }}
65 >
66 <Link href={appLink}>
67 <Box
68 sx={{
69 margin: 3,
70 width: 64,
71 height: 32,
72 cursor: 'pointer',
73
74 [theme.breakpoints.down('md')]: {
75 display: 'none',
76 },
77 }}
78 >
79 <img src="/assets/logo.svg" alt="Logo" />
80 </Box>
81 </Link>
82 <DrawerMenuItem
83 title={t('drawer.travels')}
84 onClick={() => {
85 router.push(`/e/${uuid}`, null, {shallow: true});
86 }}
87 icon="directions_car"
88 active={router.pathname === `/e/[uuid]`}
89 />
90 {isCarosterPlusEvent && connected && (
91 <DrawerMenuItem
92 title={t('drawer.alerts')}
93 onClick={() =>
94 router.push(`/e/${uuid}/alerts`, null, {shallow: true})
95 }
96 icon="track_changes"
97 active={router.pathname === `/e/[uuid]/alerts`}
98 />
99 )}
100
101 {!isCarosterPlusEvent && (
102 <DrawerMenuItem
103 title={t('drawer.waitingList')}
104 onClick={() =>
105 router.push(`/e/${uuid}/waitingList`, null, {shallow: true})
106 }
107 icon="group"
108 active={
109 router.pathname === `/e/[uuid]/waitingList` ||
110 router.pathname === `/e/[uuid]/assign/[passengerId]`
111 }
112 />
113 )}
114
115 <DrawerMenuItem
116 title={t('drawer.information')}
117 onClick={() => {
118 router.push(`/e/${uuid}/details`, null, {shallow: true});
119 }}
120 icon="info"
121 active={router.pathname === `/e/[uuid]/details`}
122 />
123 <DrawerMenuItem
124 title={t('drawer.options')}
125 onClick={() => {
126 router.push(`/e/${uuid}/options`, null, {shallow: true});
127 }}
128 icon="settings"
129 active={router.pathname === `/e/[uuid]/options`}
130 />
131 </Drawer>
132 );
133};
134
135export default DrawerMenu;