feat(drawerMenu): make menu swipeable, move icon to right, add divider

Clm-Roig · Mar 19, 2022 · 9d6e5f9 · 9d6e5f9
1 parent d95de4c
commit 9d6e5f9
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/src/app/DrawerMenu.tsx b/src/app/DrawerMenu.tsx
@@ -1,6 +1,15 @@
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
-import { Drawer, IconButton, List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import {
+  Box,
+  Divider,
+  IconButton,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  SwipeableDrawer
+} from '@mui/material';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ListAltIcon from '@mui/icons-material/ListAlt';
 import TimelineIcon from '@mui/icons-material/Timeline';
@@ -13,21 +22,25 @@ interface Props {
 
 const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, width }) => {
   return (
-    <Drawer
+    <SwipeableDrawer
+      anchor="left"
+      onClose={toggleDrawerMenu}
+      onOpen={toggleDrawerMenu}
+      open={open}
       sx={{
         width: width,
         flexShrink: 0,
         '& .MuiDrawer-paper': {
           width: width,
           boxSizing: 'border-box'
         }
-      }}
-      variant="persistent"
-      anchor="left"
-      open={open}>
-      <IconButton onClick={toggleDrawerMenu}>
-        <ChevronLeftIcon />
-      </IconButton>
+      }}>
+      <Box sx={{ display: 'flex', justifyContent: 'right' }}>
+        <IconButton onClick={toggleDrawerMenu}>
+          <ChevronLeftIcon />
+        </IconButton>
+      </Box>
+      <Divider />
       <List>
         <ListItem component={Link} to="/trackers" button key={'Mes Trackers'}>
           <ListItemIcon>
@@ -42,7 +55,7 @@ const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, width }) => {
           <ListItemText primary={'Statistiques'} />
         </ListItem>
       </List>
-    </Drawer>
+    </SwipeableDrawer>
   );
 };