feat: added configurable positions

README.md

@@ -36,7 +36,7 @@ FiveM native Rage Menu, built with React. [Documentation](https://docs.ardelanya
 --- state will be cached and reused
 local menu = Menu:Create('Example', 'Example Subtitle', nil, nil, '')
 -- 520 is a custom width, the default is
-local submenu = Menu:Create('Submenu', 'Submenu Subtitle', 520)
+local submenu = Menu:Create('Submenu', 'Submenu Subtitle', 'top-right', 520)
 submenu:AddButton('Submenu Button'):OnClick(function()
   print('Submenu Button Clicked')
 end)

fxmanifest.lua

@@ -3,7 +3,7 @@ game 'gta5'
 lua54 'yes'
 
 author 'ardelan869'
-version 'fix(client/submenu): fixed left badge not remaining'
+version 'feat: added configurable positions'
 description 'FiveM native Rage Menu, made with React'
 
 ui_page 'web/dist/index.html'

import.lua

@@ -133,13 +133,14 @@ function Menu:CloseAll()
   resetNUI();
 end
 
-function Menu:Create(menuTitle, menuSubtitle, menuWidth, maxVisibleItems, banner)
+function Menu:Create(menuTitle, menuSubtitle, menuPosition, menuWidth, maxVisibleItems, banner)
   ---@class Menu
   local menu = {
     id = generateUUID(),
     resource = GetCurrentResourceName(),
     title = menuTitle,
     subtitle = menuSubtitle,
+    position = menuPosition or 'top-left',
     width = menuWidth,
     maxVisibleItems = maxVisibleItems,
     banner = banner,
@@ -446,6 +447,7 @@ function Menu:Create(menuTitle, menuSubtitle, menuWidth, maxVisibleItems, banner
       resource = self.resource,
       title = self.title,
       subtitle = self.subtitle,
+      position = self.position,
       width = self.width,
       maxVisibleItems = self.maxVisibleItems,
       banner = self.banner

meta.lua

@@ -54,6 +54,17 @@
 
 ---@alias MenuType 'button' | 'checkbox' | 'separator' | 'list' | 'slider'
 
+---@alias MenuPosition
+---| 'top-left'
+---| 'top-center'
+---| 'top-right'
+---| 'center-left'
+---| 'center'
+---| 'center-right'
+---| 'bottom-left'
+---| 'bottom-center'
+---| 'bottom-right'
+
 ---@class MenuComponentData
 ---@field id string
 ---@field type MenuType
@@ -129,6 +140,7 @@
 ---@field resource string
 ---@field title string
 ---@field subtitle? string
+---@field position MenuPosition
 ---@field width? number
 ---@field maxVisibleItems? number
 ---@field banner? string
@@ -157,7 +169,7 @@
 ---@field __cached Menu[]
 ---@field current? string
 ---@field opened string[]
----@field Create fun(self: self, title: string, subtitle?: string, width?: number, maxVisibleItems?: number, banner?: string): Menu
+---@field Create fun(self: self, title: string, subtitle?: string, postion?: MenuPosition, width?: number, maxVisibleItems?: number, banner?: string): Menu
 ---@field GetById fun(self: self, id: string): Menu?
 ---@field GetOpened fun(self: self): Menu?
 ---@field Open fun(self: self, menu: Menu)

web/src/components/menu.tsx

@@ -5,13 +5,26 @@ import Description from '@/components/description';
 import { useCallback, useEffect, useState } from 'react';
 import { useKeyDown } from '@/lib/keys';
 import { useNuiEvent } from '@/lib/hooks';
+
 import { cn, debugData, fetchNui } from '@/lib';
 
+type MenuPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'center-left'
+  | 'center'
+  | 'center-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
 interface MenuProps {
   id: string;
   resource: string;
   title: string;
   subtitle?: string;
+  position?: MenuPosition;
   width?: number;
   maxVisibleItems?: number;
   banner?: string;
@@ -239,6 +252,7 @@ export default function Menu() {
           id: 'test',
           resource: 'ragemenu',
           title: 'Test',
+          subtitle: 'Test',
           width: 432,
           maxVisibleItems: 10,
           banner: 'https://i.imgur.com/Ua8m2Wq.gif'
@@ -311,7 +325,10 @@ export default function Menu() {
     !!items &&
     !!items.length && (
       <main
-        className="absolute w-[432px] top-5 left-5 tracking-[1px] text-[20px] font-chalet font-black"
+        className={cn(
+          'absolute w-[432px] top-5 left-5 tracking-[1px] text-[20px] font-chalet font-black m-6',
+          menu.position ?? 'top-left'
+        )}
         style={{ width: `${menu.width || 432}px` }}
       >
         <header

web/src/styles/index.css

@@ -64,3 +64,39 @@ button:hover {
 ::-webkit-outer-spin-button {
   display: none;
 }
+
+.top-left {
+  @apply top-0 left-0;
+}
+
+.top-center {
+  @apply top-0 left-1/2 translate-x-[-50%];
+}
+
+.top-right {
+  @apply top-0 right-0;
+}
+
+.center-left {
+  @apply top-[50%] translate-y-[-50%] left-0;
+}
+
+.center {
+  @apply top-[50%] translate-y-[-50%] left-1/2 translate-x-[-50%];
+}
+
+.center-right {
+  @apply top-[50%] translate-y-[-50%] right-0;
+}
+
+.bottom-left {
+  @apply bottom-0 left-0;
+}
+
+.bottom-center {
+  @apply bottom-0 left-1/2 translate-x-[-50%];
+}
+
+.bottom-right {
+  @apply bottom-0 right-0;
+}