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';
 9import Box from '@material-ui/core/Box';
10
11const DrawerMenu = () => {
12  const {t} = useTranslation();
13  const bannerOffset = useBannerStore(s => s.offset);
14  const areDetailsOpened = useEventStore(s => s.areDetailsOpened);
15  const setAreDetailsOpened = useEventStore(s => s.setAreDetailsOpened);
16  const classes = useStyles({bannerOffset});
17  const {
18    query: {uuid},
19  } = useRouter();
20
21  return (
22    <Drawer variant="permanent" className={classes.drawer}>
23      <DrawerMenuItem
24        title={t('drawer.travels')}
25        onClick={() => {
26          router.push(`/e/${uuid}`, null, {shallow: true});
27          setAreDetailsOpened(false);
28        }}
29        Icon={<Icon>directions_car</Icon>}
30        active={router.pathname == `/e/[uuid]`}
31      />
32      <Box mb={1.5}>
33        <DrawerMenuItem
34          title={t('drawer.waitingList')}
35          onClick={() => {
36            router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
37            setAreDetailsOpened(false);
38          }}
39          Icon={<Icon>group</Icon>}
40          active={router.pathname == `/e/[uuid]/waitingList`}
41        />
42      </Box>
43
44      <DrawerMenuItem
45        title={t('drawer.information')}
46        onClick={() => setAreDetailsOpened(true)}
47        Icon={<Icon>info</Icon>}
48        active={areDetailsOpened}
49      />
50    </Drawer>
51  );
52};
53
54export default DrawerMenu;