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