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;