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';
  9
 10interface Props {
 11  eventUuid: string;
 12}
 13
 14const DrawerMenu = ({eventUuid}: Props) => {
 15  const {t} = useTranslation();
 16  const theme = useTheme();
 17
 18  const {connected} = useProfile();
 19  const appLink = connected ? '/dashboard' : `/e/${eventUuid}` || '';
 20
 21  const router = useRouter();
 22  const {
 23    query: {uuid},
 24  } = router;
 25
 26  return (
 27    <Drawer
 28      variant="permanent"
 29      sx={{
 30        width: '240px',
 31
 32        [theme.breakpoints.down('md')]: {
 33          width: '100%',
 34          position: 'fixed',
 35          bottom: 0,
 36          zIndex: 1,
 37        },
 38
 39        '& .MuiDrawer-paper': {
 40          zIndex: theme.zIndex.appBar - 1,
 41          width: '239px',
 42          display: 'flex',
 43          flexDirection: 'column',
 44          boxSizing: 'border-box',
 45          left: 0,
 46          top: 0,
 47          color: 'white',
 48          overflowX: 'hidden',
 49          position: 'static',
 50
 51          [theme.breakpoints.down('md')]: {
 52            bottom: 0,
 53            top: 'auto',
 54            paddingTop: 0,
 55            height: '80px',
 56            width: '100%',
 57            flexDirection: 'row',
 58            boxShadow: '0px -3px 8px 0px rgba(0, 0, 0, 0.08)',
 59          },
 60        },
 61      }}
 62    >
 63      <Link href={appLink}>
 64        <Box
 65          sx={{
 66            margin: 3,
 67            width: 64,
 68            height: 32,
 69            cursor: 'pointer',
 70
 71            [theme.breakpoints.down('md')]: {
 72              display: 'none',
 73            },
 74          }}
 75        >
 76          <img src="/assets/logo.svg" alt="Logo" />
 77        </Box>
 78      </Link>
 79      <DrawerMenuItem
 80        title={t('drawer.travels')}
 81        onClick={() => {
 82          router.push(`/e/${uuid}`, null, {shallow: true});
 83        }}
 84        icon="directions_car"
 85        active={router.pathname === `/e/[uuid]`}
 86      />
 87      <DrawerMenuItem
 88        title={t('drawer.waitingList')}
 89        onClick={() => {
 90          router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
 91        }}
 92        icon="group"
 93        active={router.pathname === `/e/[uuid]/waitingList` || router.pathname === `/e/[uuid]/assign/[passengerId]`}
 94      />
 95      <DrawerMenuItem
 96        title={t('drawer.information')}
 97        onClick={() => {
 98          router.push(`/e/${uuid}/details`, null, {shallow: true});
 99        }}
100        icon="info"
101        active={router.pathname === `/e/[uuid]/details`}
102      />
103    </Drawer>
104  );
105};
106
107export default DrawerMenu;