auto close menu after click

src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx

@@ -1,19 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import TickIcon from '@mui/icons-material/Done';
 import { CollectionSortProps } from '.';
-import { OverflowMenuContext } from 'contexts/overflowMenu';
 import { OverflowMenuOption } from 'components/OverflowMenu/option';
 import { SvgIcon } from '@mui/material';
 
 const SortByOptionCreator =
     ({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
     (props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
-        const { close } = useContext(OverflowMenuContext);
-
         const handleClick = () => {
             setCollectionSortBy(props.sortBy);
-            close();
         };
 
         return (

src/components/OverflowMenu/option.tsx

@@ -1,12 +1,14 @@
 import { MenuItem, ButtonProps, Typography, Box } from '@mui/material';
 import { FluidContainer } from 'components/Container';
-import React from 'react';
+import { OverflowMenuContext } from 'contexts/overflowMenu';
+import React, { useContext } from 'react';
 
 interface Iprops {
     onClick: () => void;
     color?: ButtonProps['color'];
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    keepOpenAfterClick?: boolean;
     children?: any;
 }
 export function OverflowMenuOption({
@@ -14,11 +16,20 @@ export function OverflowMenuOption({
     color = 'primary',
     startIcon,
     endIcon,
+    keepOpenAfterClick,
     children,
 }: Iprops) {
+    const menuContext = useContext(OverflowMenuContext);
+
+    const handleClick = () => {
+        onClick();
+        if (!keepOpenAfterClick) {
+            menuContext.close();
+        }
+    };
     return (
         <MenuItem
-            onClick={onClick}
+            onClick={handleClick}
             sx={{
                 color: (theme) => theme.palette[color].main,
                 padding: 1.5,