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