diff --git a/[core]/esx_menu_default/web/build/index.html b/[core]/esx_menu_default/web/build/index.html
index 5e0f081a..74d98a36 100644
--- a/[core]/esx_menu_default/web/build/index.html
+++ b/[core]/esx_menu_default/web/build/index.html
@@ -1,19 +1,19 @@
-
-
-
-
-
-
-
-
- ESX Menu Default
+
+
+
+
+
+
+
+
+ ESX Menu Default
-
-
-
-
-
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/[core]/esx_menu_default/web/src/app/App.tsx b/[core]/esx_menu_default/web/src/app/App.tsx
index 3c34772f..427a176e 100644
--- a/[core]/esx_menu_default/web/src/app/App.tsx
+++ b/[core]/esx_menu_default/web/src/app/App.tsx
@@ -1,106 +1,96 @@
import React, { useEffect, useState } from "react";
import { useNuiEvent } from "@/hooks/useNuiEvent";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion";
import Menu from "@/components/menu";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
export interface Element {
- label: string;
- name: string;
- description?: string;
- icon?: IconProp;
- value?: number;
- type?: "slider";
- min: number;
- max: number;
- options?: string[];
- usable?: boolean;
- unselectable?: boolean;
- disableRightArrow?: boolean;
+ label: string;
+ name: string;
+ description?: string;
+ icon?: IconProp;
+ value?: number;
+ type?: "slider";
+ min: number;
+ max: number;
+ options?: string[];
+ usable?: boolean;
+ unselectable?: boolean;
+ disableRightArrow?: boolean;
}
export interface MenuData {
- title: string;
- namespace: string;
- name: string;
- align:
- | "top-left"
- | "top-right"
- | "bottom-left"
- | "bottom-right"
- | "center"
- | "left-center"
- | "right-center";
- elements: Element[];
+ title: string;
+ namespace: string;
+ name: string;
+ align: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" | "left-center" | "right-center";
+ elements: Element[];
}
export interface CloseData {
- namespace: string;
- name: string;
+ namespace: string;
+ name: string;
}
-const visibility_animation = {
- initial: { opacity: 0 },
- animate: {
- opacity: 1,
- transition: { duration: 0.3, ease: [0, 0, 0.2, 1] },
- },
- exit: {
- opacity: 0,
- transition: { duration: 0.3, ease: [0.4, 0, 1, 1] },
- },
+const visibility_animation: HTMLMotionProps<"div"> = {
+ initial: { opacity: 0 },
+ animate: {
+ opacity: 1,
+ transition: { duration: 0.3, ease: [0, 0, 0.2, 1] },
+ },
+ exit: {
+ opacity: 0,
+ transition: { duration: 0.3, ease: [0.4, 0, 1, 1] },
+ },
};
const App: React.FC = () => {
- const [_, setCreatedMenus] = useState>({});
+ const [_, setCreatedMenus] = useState>({});
- const [currentMenu, setCurrentMenu] = useState(null);
+ const [currentMenu, setCurrentMenu] = useState(null);
- useNuiEvent("openMenu", (data) => {
- setCreatedMenus((prev) => {
- const list = prev[data.namespace] ?? [];
- return {
- ...prev,
- [data.namespace]: [...list, data],
- };
+ useNuiEvent("openMenu", (data) => {
+ setCreatedMenus((prev) => {
+ const list = prev[data.namespace] ?? [];
+ return {
+ ...prev,
+ [data.namespace]: [...list, data],
+ };
+ });
+
+ console.log(JSON.stringify(data));
+
+ setCurrentMenu(data);
});
- console.log(JSON.stringify(data))
+ useNuiEvent("closeMenu", ({ namespace, name }) => {
+ setCreatedMenus((prev) => {
+ const list = prev[namespace] ?? [];
+ const nextList = list.filter((m) => m.name !== name);
- setCurrentMenu(data);
- });
+ const next = { ...prev };
+ if (nextList.length > 0) {
+ next[namespace] = nextList;
+ } else {
+ delete next[namespace];
+ }
- useNuiEvent("closeMenu", ({ namespace, name }) => {
- setCreatedMenus((prev) => {
- const list = prev[namespace] ?? [];
- const nextList = list.filter((m) => m.name !== name);
+ const all = Object.values(next).flat();
+ setCurrentMenu(all.length > 0 ? all[all.length - 1] : null);
- const next = { ...prev };
- if (nextList.length > 0) {
- next[namespace] = nextList;
- } else {
- delete next[namespace];
- }
-
- const all = Object.values(next).flat();
- setCurrentMenu(all.length > 0 ? all[all.length - 1] : null);
-
- return next;
+ return next;
+ });
});
- });
- return (
-
- {currentMenu && (
-
-
-
- )}
-
- );
+ return (
+
+ {currentMenu && (
+
+
+
+ )}
+
+ );
};
export default App;