@@ -133,18 +133,38 @@ export const SideMenu = ({}) => {
 		})
 	}, [account_type])
 
+	const handleCloseDrawer = () => {
+		updateSettings('sidemenu', { sidemenu_state: 'closed' })
+	}
+
 	return (
-		<Drawer
-			className={styles.drawer}
-			PaperProps={{
-				sx: {
-					backgroundColor: '#151518',
-					border: 'none',
-				},
-			}}
-			variant='permanent'
-			open={open === 'opened'}
-		>
+		<>
+			{open === 'opened' && (
+				<Box
+					aria-hidden
+					onClick={handleCloseDrawer}
+					sx={{
+						position: 'fixed',
+						inset: 0,
+						bgcolor: 'rgba(0, 0, 0, 0.5)',
+						zIndex: 1199,
+						transition: 'opacity 0.2s ease-in-out',
+					}}
+				/>
+			)}
+			<Drawer
+				className={styles.drawer}
+				PaperProps={{
+					sx: {
+						backgroundColor: '#151518',
+						border: 'none',
+						zIndex: 1200,
+					},
+				}}
+				variant='permanent'
+				anchor='left'
+				open={open === 'opened'}
+			>
 			<DrawerHeader
 				sx={{
 					display: 'flex',
@@ -272,7 +292,8 @@ export const SideMenu = ({}) => {
 			</Box>
 				</Box>
 			)}
-		</Drawer>
+			</Drawer>
+		</>
 	)
 }