frontend/containers/DrawerMenu/index.tsx (view raw)
1import Drawer from '@material-ui/core/Drawer';
2import Icon from '@material-ui/core/Icon';
3import {useTranslation} from 'react-i18next';
4import router, {useRouter} from 'next/router';
5import DrawerMenuItem from './DrawerMenuItem';
6import useStyles from './styles';
7import useBannerStore from '../../stores/useBannerStore';
8import useEventStore from '../../stores/useEventStore';
9
10const DrawerMenu = () => {
11 const {t} = useTranslation();
12 const bannerOffset = useBannerStore(s => s.offset);
13 const areDetailsOpened = useEventStore(s => s.areDetailsOpened);
14 const setAreDetailsOpened = useEventStore(s => s.setAreDetailsOpened);
15 const classes = useStyles({bannerOffset});
16 const {
17 query: {uuid},
18 } = useRouter();
19
20 return (
21 <Drawer variant="permanent" className={classes.drawer}>
22 <DrawerMenuItem
23 title={t('drawer.travels')}
24 onClick={() => {
25 router.push(`/e/${uuid}`, null, {shallow: true});
26 setAreDetailsOpened(false);
27 }}
28 Icon={<Icon>directions_car</Icon>}
29 active={router.pathname == `/e/[uuid]`}
30 />
31 <DrawerMenuItem
32 title={t('drawer.waitingList')}
33 onClick={() => {
34 router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
35 setAreDetailsOpened(false);
36 }}
37 Icon={<Icon>group</Icon>}
38 active={router.pathname == `/e/[uuid]/waitingList`}
39 />
40 <DrawerMenuItem
41 title={t('drawer.information')}
42 onClick={() => setAreDetailsOpened(true)}
43 Icon={<Icon>info</Icon>}
44 active={areDetailsOpened}
45 />
46 </Drawer>
47 );
48};
49
50export default DrawerMenu;