feat(web): ability to not be able to close the context menu

resource/interface/client/context.lua

@@ -18,6 +18,7 @@ function lib.showContext(id)
         action = 'showContext',
         data = {
             title = data.title,
+            canClose = data.canClose,
             menu = data.menu,
             options = data.options
         }

web/src/features/menu/context/ContextMenu.tsx

@@ -18,6 +18,7 @@ const ContextMenu: React.FC = () => {
   });
 
   const closeContext = () => {
+    if (contextMenu.canClose === false) return;
     setVisible(false);
     fetchNui('closeContext');
   };
@@ -76,7 +77,8 @@ const ContextMenu: React.FC = () => {
             </Box>
             <Flex
               borderRadius="md"
-              bg="gray.800"
+              as="button"
+              bg={contextMenu.canClose === false ? 'gray.600' : 'gray.800'}
               flex="1 15%"
               alignSelf="stretch"
               textAlign="center"
@@ -84,11 +86,16 @@ const ContextMenu: React.FC = () => {
               alignItems="center"
               marginLeft={2}
               p={2}
-              _hover={{ bg: 'gray.700' }}
+              cursor={contextMenu.canClose === false ? 'not-allowed' : undefined}
+              _hover={{ bg: contextMenu.canClose === false ? undefined : 'gray.700' }}
               transition="300ms"
               onClick={() => closeContext()}
             >
-              <FontAwesomeIcon icon="xmark" fontSize={20} />
+              <FontAwesomeIcon
+                icon="xmark"
+                fontSize={20}
+                color={contextMenu.canClose === false ? '#718096' : undefined}
+              />
             </Flex>
           </Flex>
           <Box maxH={560} overflowY="scroll">

web/src/interfaces/context.ts

@@ -21,5 +21,6 @@ export interface Options {
 export interface ContextMenuProps {
   title: string;
   menu?: string;
+  canClose?: boolean;
   options: Options | Option[];
 }