1import Drawer from '@mui/material/Drawer';
 2import {useTheme} from '@mui/material/styles';
 3import Icon from '@mui/material/Icon';
 4import {useTranslation} from 'react-i18next';
 5import {useRouter} from 'next/router';
 6import DrawerMenuItem from './DrawerMenuItem';
 7
 8const DrawerMenu = () => {
 9  const {t} = useTranslation();
10  const theme = useTheme();
11
12  const router = useRouter();
13  const {
14    query: {uuid},
15  } = router;
16
17  return (
18    <Drawer
19      variant="permanent"
20      sx={{
21        width: '85px',
22
23        [theme.breakpoints.down('md')]: {
24          width: '100%',
25          position: 'fixed',
26          bottom: 0,
27          zIndex: 1,
28        },
29
30        '& .MuiDrawer-paper': {
31          zIndex: theme.zIndex.appBar - 1,
32          width: '84px',
33          display: 'flex',
34          flexDirection: 'column',
35          boxSizing: 'border-box',
36          left: 0,
37          top: 0,
38          backgroundColor: '#242424',
39          color: 'white',
40          overflowX: 'hidden',
41          position: 'static',
42
43          [theme.breakpoints.down('md')]: {
44            bottom: 0,
45            top: 'auto',
46            paddingTop: 0,
47            height: '56px',
48            width: '100%',
49            flexDirection: 'row',
50          },
51        },
52      }}
53    >
54      <DrawerMenuItem
55        title={t('drawer.travels')}
56        onClick={() => {
57          router.push(`/e/${uuid}`, null, {shallow: true});
58        }}
59        Icon={<Icon>directions_car</Icon>}
60        active={router.pathname == `/e/[uuid]`}
61      />
62      <DrawerMenuItem
63        title={t('drawer.waitingList')}
64        onClick={() => {
65          router.push(`/e/${uuid}/waitingList`, null, {shallow: true});
66        }}
67        Icon={<Icon>group</Icon>}
68        active={router.pathname == `/e/[uuid]/waitingList`}
69      />
70      <DrawerMenuItem
71        title={t('drawer.information')}
72        onClick={() => {
73          router.push(`/e/${uuid}/details`, null, {shallow: true});
74        }}
75        Icon={<Icon>info</Icon>}
76        active={router.pathname == `/e/[uuid]/details`}
77      />
78    </Drawer>
79  );
80};
81
82export default DrawerMenu;