From 7aa9e86b32c4f9b769929f928089e96b04111b2d Mon Sep 17 00:00:00 2001
From: Matin <matin.m13581358@gmail.com>
Date: Fri, 12 Dec 2025 14:50:33 +0330
Subject: [PATCH] (FEAT) ContextMenu position change feature

---
 resource/interface/client/context.lua         |  2 ++
 web/src/features/menu/context/ContextMenu.tsx | 10 ++++++----
 web/src/typings/context.ts                    |  1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/resource/interface/client/context.lua b/resource/interface/client/context.lua
index 0bb379eb3..5ec517c59 100644
--- a/resource/interface/client/context.lua
+++ b/resource/interface/client/context.lua
@@ -33,6 +33,7 @@ local openContextMenu = nil
 ---@field id string
 ---@field title string
 ---@field menu? string
+---@field position? MenuPosition
 ---@field onExit? fun()
 ---@field onBack? fun()
 ---@field canClose? boolean
@@ -67,6 +68,7 @@ function lib.showContext(id)
             title = data.title,
             canClose = data.canClose,
             menu = data.menu,
+            position = data.position,
             options = data.options
         }
     }, { sort_keys = true }))
diff --git a/web/src/features/menu/context/ContextMenu.tsx b/web/src/features/menu/context/ContextMenu.tsx
index 1c8d1f29d..fc59a32f1 100644
--- a/web/src/features/menu/context/ContextMenu.tsx
+++ b/web/src/features/menu/context/ContextMenu.tsx
@@ -13,11 +13,13 @@ const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
 };
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme, params: { position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' }) => ({
   container: {
     position: 'absolute',
-    top: '15%',
-    right: '25%',
+    top: params.position === 'top-left' || params.position === 'top-right' ? '15%' : undefined,
+    left: params.position === 'top-left' || params.position === 'bottom-left' ? '5%' : undefined,
+    right: params.position === 'top-right' || params.position === 'bottom-right' ? '25%' : undefined,
+    bottom: params.position === 'bottom-left' || params.position === 'bottom-right' ? '15%' : undefined,,
     width: 320,
     height: 580,
   },
@@ -47,7 +49,7 @@ const useStyles = createStyles((theme) => ({
 }));
 
 const ContextMenu: React.FC = () => {
-  const { classes } = useStyles();
+  const { classes } = useStyles({ position: contextMenu.position || 'top-right' });
   const [visible, setVisible] = useState(false);
   const [contextMenu, setContextMenu] = useState<ContextMenuProps>({
     title: '',
diff --git a/web/src/typings/context.ts b/web/src/typings/context.ts
index eefbd57d8..06474e6de 100644
--- a/web/src/typings/context.ts
+++ b/web/src/typings/context.ts
@@ -31,5 +31,6 @@ export interface ContextMenuProps {
   title: string;
   menu?: string;
   canClose?: boolean;
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
   options: Options | Option[];
 }