Fix FlyoutMenu for Safari iOS

src/components/menu/FlyoutMenu.tsx

@@ -1,45 +1,27 @@
-import { Box, Drawer } from '@mui/material';
-import { useContext } from 'react';
-import { ThemeContext } from '../../contexts/ThemeContextProvider';
+import { Box, SwipeableDrawer } from '@mui/material';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { setFlyoutOpen } from '../../store/slices/menuSlice';
 import FlyoutMenuList from './FlyoutMenuList';
 
 const FlyoutMenu = () => {
-  const themeContext = useContext(ThemeContext);
   const flyoutOpen = useAppSelector((state) => state.menu.flyoutOpen);
   const dispatch = useAppDispatch();
 
-  const handleDraerOnClose = () => {
-    dispatch(setFlyoutOpen(false));
+  const toggleDrawer = (newOpen: boolean) => () => {
+    dispatch(setFlyoutOpen(newOpen));
   };
 
-  const background = themeContext.light ? 'rgba(255, 255, 255, 0.7);' : 'rgba(0, 0, 0, 0.7);';
   return (
-    <Drawer anchor="right" open={flyoutOpen} onClose={handleDraerOnClose}>
+    <SwipeableDrawer anchor="right" open={flyoutOpen} onClose={toggleDrawer(false)} onOpen={toggleDrawer(true)}>
       <Box
         sx={{
-          position: 'fixed',
-          bottom: 0,
-          right: 0,
-          zIndex: 9999,
           height: '100%',
-          width: '75%',
-          background: background,
-          backdropFilter: 'blur(24px)',
-          display: 'flex',
-          flexDirection: 'column',
+          overflow: 'auto',
+          m: 2,
         }}>
-        <Box
-          sx={{
-            height: '100%',
-            overflow: 'auto',
-            m: 2,
-          }}>
-          <FlyoutMenuList />
-        </Box>
+        <FlyoutMenuList />
       </Box>
-    </Drawer>
+    </SwipeableDrawer>
   );
 };
 export default FlyoutMenu;