From 9d6e5f9eefcaaab1ae5522a97fd45bbff6831533 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Roig?= <clm.roig@gmail.com>
Date: Sat, 19 Mar 2022 01:15:27 +0100
Subject: [PATCH] feat(drawerMenu): make menu swipeable, move icon to right,
 add divider

---
 src/app/DrawerMenu.tsx | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/app/DrawerMenu.tsx b/src/app/DrawerMenu.tsx
index 9992c9f4..73a150f5 100644
--- 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,7 +22,11 @@ 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,
@@ -21,13 +34,13 @@ const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, width }) => {
           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>
   );
 };