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