0.0.1

2026-07-07 21:08:52 +02:00
commit 4c20cfc716
2613 changed files with 318021 additions and 0 deletions
--- a/resources/[core]/esx_menu_default/web/.eslintrc.cjs
+++ b/resources/[core]/esx_menu_default/web/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};
--- a/resources/[core]/esx_menu_default/web/.gitignore
+++ b/resources/[core]/esx_menu_default/web/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependencies
+node_modules
+.pnpm-store
+.npm
+
+# Build outputs
+*.local
+
+# Environment files
+.env
+.env.*
+!.env.example
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS generated files
+Thumbs.db
+.DS_Store
--- a/resources/[core]/esx_menu_default/web/index.html
+++ b/resources/[core]/esx_menu_default/web/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.2.0/css/pro.min.css" rel="stylesheet">
+  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ESX Menu Default</title>
+</head>
+
+<body>
+  <div id="root"></div>
+
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
--- a/resources/[core]/esx_menu_default/web/package.json
+++ b/resources/[core]/esx_menu_default/web/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "web",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "start:game": "vite build --watch",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [],
+  "author": "Err",
+  "license": "ISC",
+  "packageManager": "pnpm@10.13.1",
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@tailwindcss/vite": "^4.0.15",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.5.0",
+    "lucide-react": "^0.525.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.13",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.23.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.3"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}
--- a/resources/[core]/esx_menu_default/web/src/app/App.tsx
+++ b/resources/[core]/esx_menu_default/web/src/app/App.tsx
@@ -0,0 +1,94 @@
+import React, { useEffect, useState } from "react";
+import { useNuiEvent } from "@/hooks/useNuiEvent";
+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;
+}
+
+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[];
+}
+
+export interface CloseData {
+    namespace: string;
+    name: string;
+}
+
+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<Record<string, MenuData[]>>({});
+
+    const [currentMenu, setCurrentMenu] = useState<MenuData | null>(null);
+
+    useNuiEvent<MenuData>("openMenu", (data) => {
+        setCreatedMenus((prev) => {
+            const list = prev[data.namespace] ?? [];
+            return {
+                ...prev,
+                [data.namespace]: [...list, data],
+            };
+        });
+
+        setCurrentMenu(data);
+    });
+
+    useNuiEvent<CloseData>("closeMenu", ({ namespace, name }) => {
+        setCreatedMenus((prev) => {
+            const list = prev[namespace] ?? [];
+            const nextList = list.filter((m) => m.name !== name);
+
+            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 (
+        <AnimatePresence mode="wait">
+            {currentMenu && (
+                <motion.div key={`${currentMenu.namespace}:${currentMenu.name}`} {...visibility_animation}>
+                    <Menu data={currentMenu} />
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+};
+
+export default App;
--- a/resources/[core]/esx_menu_default/web/src/components/menu-button.tsx
+++ b/resources/[core]/esx_menu_default/web/src/components/menu-button.tsx
@@ -0,0 +1,67 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ArrowRight } from "lucide-react";
+import { Element } from "@/app/App";
+
+interface Props {
+  element: Element;
+  isSelected?: boolean;
+}
+
+const MenuButton: React.FC<Props> = ({ element, isSelected }) => {
+  const { label, description, icon, usable, disableRightArrow, unselectable } =
+    element;
+  const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between";
+  const sel = isSelected
+    ? "bg-[#FB9B041A] border border-[#FB9B04]"
+    : "bg-[#252525] border border-transparent";
+
+  const unSelectable = unselectable ? "opacity-80" : "";
+
+  return (
+    <div className={`${base} ${sel} ${unSelectable}`}>
+      <div className="flex items-center gap-4">
+        {icon && (
+          <FontAwesomeIcon
+            className="size-6"
+            icon={icon}
+            color={isSelected ? "#FB9B04" : undefined}
+          />
+        )}
+
+        <div className="flex flex-col justify-center">
+          {description ? (
+            <>
+              <p
+                className={`font-semibold ${
+                  isSelected ? "text-[#FB9B04]" : "text-neutral-100"
+                }`}
+                dangerouslySetInnerHTML={{ __html: label }}
+              />
+              <p
+                className={`text-sm font-normal ${
+                  isSelected ? "text-[#FB9B04]" : "text-neutral-200"
+                }`}
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            </>
+          ) : (
+            <p
+              className={`text-sm font-normal ${
+                isSelected ? "text-[#FB9B04]" : "text-neutral-200"
+              }`}
+              dangerouslySetInnerHTML={{ __html: label }}
+            />
+          )}
+        </div>
+      </div>
+
+      {usable !== false &&
+        disableRightArrow !== true &&
+        unselectable !== true && (
+          <ArrowRight color={isSelected ? "#FB9B04" : "white"} size="1.6rem" />
+        )}
+    </div>
+  );
+};
+
+export default MenuButton;
--- a/resources/[core]/esx_menu_default/web/src/components/menu-slider.tsx
+++ b/resources/[core]/esx_menu_default/web/src/components/menu-slider.tsx
@@ -0,0 +1,78 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Element } from "@/app/App";
+
+interface Props {
+  element: Element;
+  isSelected?: boolean;
+}
+
+const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {
+  const { label, description, icon, unselectable } = element;
+
+  const options = (element as Element).options as string[] | undefined;
+
+  const min = options ? 0 : element.min ?? 0;
+  const max = options ? Math.max(0, options.length - 1) : element.max ?? 0;
+
+  const rawValue = element.value ?? min;
+  const value = Math.min(max, Math.max(min, rawValue));
+
+  const base = "rounded-[4px] flex items-center p-4 gap-4 justify-between";
+  const sel = isSelected
+    ? "bg-[#FB9B041A] border border-[#FB9B04]"
+    : "bg-[#252525] border border-transparent";
+  const text = isSelected ? "text-[#FB9B04]" : "text-neutral-100";
+
+  const unSelectable = unselectable ? "opacity-50" : ""
+
+  return (
+    <div className={`${base} ${sel} ${unSelectable}`}>
+      <div className="flex items-center gap-4">
+        {icon && (
+          <FontAwesomeIcon
+            className="size-6"
+            icon={icon}
+            color={isSelected ? "#FB9B04" : undefined}
+          />
+        )}
+        <div className="flex flex-col justify-center">
+          {description ? (
+            <>
+              <p
+                className={`font-semibold ${text}`}
+                dangerouslySetInnerHTML={{ __html: label }}
+              />
+              <p
+                className={`text-sm font-normal ${
+                  isSelected ? "text-[#FB9B04]" : "text-neutral-200"
+                }`}
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            </>
+          ) : (
+            <p
+              className={`text-sm font-normal ${text}`}
+              dangerouslySetInnerHTML={{ __html: label }}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 select-none">
+        <ChevronLeft color={isSelected ? "#FB9B04" : "white"} />
+        {options ? (
+          <span
+            className={`${text} whitespace-nowrap overflow-hidden text-ellipsis`}
+            dangerouslySetInnerHTML={{ __html: options[value] ?? "" }}
+          />
+        ) : (
+          <span className={`${text} w-6 text-center`}>{value}</span>
+        )}
+        <ChevronRight color={isSelected ? "#FB9B04" : "white"} />
+      </div>
+    </div>
+  );
+};
+
+export default MenuSlider;
--- a/resources/[core]/esx_menu_default/web/src/components/menu.tsx
+++ b/resources/[core]/esx_menu_default/web/src/components/menu.tsx
@@ -0,0 +1,140 @@
+import { useReducer, useState, useRef, useEffect } from "react";
+import { fetchNui } from "@/utils/fetchNui";
+import { useControls } from "@/hooks/useControls";
+import { MenuData } from "@/app/App";
+import MenuButton from "./menu-button";
+import MenuSlider from "./menu-slider";
+import { GetPosition } from "@/utils/getPosition";
+
+interface Props {
+  data: MenuData;
+}
+
+const Menu: React.FC<Props> = ({ data }) => {
+  const [position, setPosition] = useState(0);
+  const [, forceRender] = useReducer((v) => v + 1, 0);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const elements = data.elements;
+
+  const payload = () => ({
+    _namespace: data.namespace,
+    _name: data.name,
+    current: elements[position],
+    elements,
+  });
+
+  const submit = () => {
+    const el = elements[position];
+    if (el?.usable === false) return;
+
+    fetchNui("menu_submit", payload());
+  };
+
+  const cancel = () =>
+    fetchNui("menu_cancel", { _namespace: data.namespace, _name: data.name });
+
+  const change = () => {
+    const el = elements[position];
+    if (el?.usable === false) return;
+
+    fetchNui("menu_change", payload());
+  };
+
+  const stepSelectedSlider = (delta: number) => {
+    const el = elements[position];
+
+    if (el?.usable === false) return;
+    if (el?.type !== "slider") return;
+
+    const options = (el as any).options as string[] | undefined;
+
+    const min = options ? 0 : el.min ?? 0;
+    const max = options ? Math.max(0, options.length - 1) : el.max ?? 0;
+
+    const cur = (el.value ?? min) + delta;
+
+    if (cur > max) {
+      el.value = min;
+    } else if (cur < min) {
+      el.value = max;
+    } else {
+      el.value = cur;
+    }
+
+    forceRender();
+    change();
+  };
+
+  useControls({
+    elements,
+    position,
+    setPosition: (updater) => {
+      setPosition(updater);
+      change();
+    },
+    submit,
+    cancel,
+    changeLeft: () => stepSelectedSlider(-1),
+    changeRight: () => stepSelectedSlider(1),
+  });
+
+  useEffect(() => {
+    const el = itemRefs.current[position];
+    if (el) {
+      el.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "nearest",
+      });
+    }
+  }, [position]);
+
+  useEffect(() => {
+    if (elements[position]?.unselectable) {
+      const firstSelectable = elements.findIndex((el) => !el.unselectable);
+      if (firstSelectable !== -1) setPosition(firstSelectable);
+    }
+  }, []);
+
+  return (
+    <div className={`absolute ${GetPosition(data.align)}`}>
+      <div className="w-[26rem] h-fit max-h-[42rem] bg-[#161616] p-4 rounded-[10px] flex flex-col gap-4">
+        <div className="flex justify-between items-center">
+          <h1
+            className="font-bold uppercase text-xl my-2 text-neutral-100"
+            dangerouslySetInnerHTML={{ __html: data.title }}
+          />
+          <img
+            className="h-10"
+            src="https://media.discordapp.net/attachments/1370464258382368918/1409914889174257724/esxLogo-sNwPFb_p.png?ex=68af1d10&is=68adcb90&hm=5ce71e8e56c92753b9718188e2c930fb1682d1debae6a63d7ff6b255d2c6ce55&=&format=webp&quality=lossless&width=350&height=350"
+            alt=""
+          />
+        </div>
+
+        <div className="overflow-y-auto h-full flex flex-col gap-4">
+          {elements.map((element, index) => {
+            const isSelected = index === position;
+
+            return (
+              <div
+                key={`wrapper-${element.name || element.label}-${index}`}
+                ref={(el: HTMLDivElement | null) => {
+                  itemRefs.current[index] = el;
+                }}
+              >
+                {element.type === "slider" ? (
+                  <MenuSlider element={element} isSelected={isSelected} />
+                ) : (
+                  <MenuButton element={element} isSelected={isSelected} />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Menu;
--- a/resources/[core]/esx_menu_default/web/src/hooks/useControls.ts
+++ b/resources/[core]/esx_menu_default/web/src/hooks/useControls.ts
@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+
+export type Control = "TOP" | "DOWN" | "ENTER" | "BACKSPACE" | "LEFT" | "RIGHT";
+
+interface Props {
+  elements: any[];
+  position: number;
+  setPosition: (p: number | ((prev: number) => number)) => void;
+  submit: () => void;
+  cancel: () => void;
+  changeLeft: () => void;
+  changeRight: () => void;
+}
+
+export const useControls = ({
+  elements,
+  position,
+  setPosition,
+  submit,
+  cancel,
+  changeLeft,
+  changeRight,
+}: Props) => {
+  useEffect(() => {
+    const onMessage = (
+      ev: MessageEvent<{ action: string; control: Control }>
+    ) => {
+      if (ev.data.action !== "controlPressed") return;
+
+      const skipUp = (p: number) => {
+        let next = p === 0 ? elements.length - 1 : p - 1;
+        while (elements[next]?.unselectable) {
+          next = next === 0 ? elements.length - 1 : next - 1;
+        }
+        return next;
+      };
+
+      const skipDown = (p: number) => {
+        let next = p === elements.length - 1 ? 0 : p + 1;
+        while (elements[next]?.unselectable) {
+          next = next === elements.length - 1 ? 0 : next + 1;
+        }
+        return next;
+      };
+
+      switch (ev.data.control) {
+        case "TOP":
+          setPosition((p) => skipUp(typeof p === "number" ? p : position));
+          break;
+        case "DOWN":
+          setPosition((p) => skipDown(typeof p === "number" ? p : position));
+          break;
+        case "ENTER":
+          if (!elements[position]?.unselectable) submit();
+          break;
+        case "BACKSPACE":
+          cancel();
+          break;
+        case "LEFT":
+          changeLeft();
+          break;
+        case "RIGHT":
+          changeRight();
+          break;
+      }
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [
+    elements,
+    position,
+    setPosition,
+    submit,
+    cancel,
+    changeLeft,
+    changeRight,
+  ]);
+};
--- a/resources/[core]/esx_menu_default/web/src/hooks/useNuiEvent.ts
+++ b/resources/[core]/esx_menu_default/web/src/hooks/useNuiEvent.ts
@@ -0,0 +1,47 @@
+// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/hooks/useNuiEvent.ts
+import { MutableRefObject, useEffect, useRef } from 'react';
+import { noop } from '../utils/misc';
+
+interface NuiMessageData<T = unknown> {
+  action: string;
+  data: T;
+}
+
+type NuiHandlerSignature<T> = (data: T) => void;
+
+/**
+ * A hook that manage events listeners for receiving data from the client scripts
+ * @param action The specific `action` that should be listened for.
+ * @param handler The callback function that will handle data relayed by this hook
+ *
+ * @example
+ * useNuiEvent<{visibility: true, wasVisible: 'something'}>('setVisible', (data) => {
+ *   // whatever logic you want
+ * })
+ *
+ **/
+
+export const useNuiEvent = <T = any>(action: string, handler: (data: T) => void) => {
+  const savedHandler: MutableRefObject<NuiHandlerSignature<T>> = useRef(noop);
+
+  // Make sure we handle for a reactive handler
+  useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  useEffect(() => {
+    const eventListener = (event: MessageEvent<NuiMessageData<T>>) => {
+      const { action: eventAction, data } = event.data;
+
+      if (savedHandler.current) {
+        if (eventAction === action) {
+          savedHandler.current(data);
+        }
+      }
+    };
+
+    window.addEventListener('message', eventListener);
+    // Remove Event Listener on component cleanup
+    return () => window.removeEventListener('message', eventListener);
+  }, [action]);
+};
--- a/resources/[core]/esx_menu_default/web/src/index.css
+++ b/resources/[core]/esx_menu_default/web/src/index.css
@@ -0,0 +1,120 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-fonoreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 0 0% 9%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 225 84% 49%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 0 0% 15%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 100% / 10%;
+    --sidebar-ring: 0 0% 45%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-transparent w-[100vw] h-[100vh] text-foreground;
+  }
+}
+
+::-webkit-scrollbar {
+  background: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+:root {
+  font-family: "Poppins", sans-serif !important;
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  color-scheme: normal !important;
+  background-color: none !important;
+  overflow: hidden !important;
+  height: 100vh !important;
+  width: 100vw !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: 1.2vh !important;
+}
+
+#root {
+  height: 100vh !important;
+  width: 100vw !important;
+}
+
+body {
+  user-select: none;
+}
--- a/resources/[core]/esx_menu_default/web/src/lib/utils.ts
+++ b/resources/[core]/esx_menu_default/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/resources/[core]/esx_menu_default/web/src/main.tsx
+++ b/resources/[core]/esx_menu_default/web/src/main.tsx
@@ -0,0 +1,38 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./app/App";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { isEnvBrowser } from "./utils/misc";
+import ErrorBoundary from "./providers/errorBoundary";
+import { ThemeProvider } from "./providers/themeProvider";
+
+library.add(fas, far, fab);
+
+if (isEnvBrowser()) {
+  const root = document.getElementById("root");
+  // https://i.imgur.com/iPTAdYV.png - Night time img
+  // https://i.imgur.com/3pzRj9n.png - Day time img
+  //
+  // root!.style.backgroundImage = 'url("/images/carShader.png")';
+  root!.style.backgroundSize = "cover";
+  root!.style.backgroundRepeat = "no-repeat";
+  root!.style.backgroundPosition = "center";
+}
+
+const root = document.getElementById("root");
+
+createRoot(root!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      {" "}
+      {/* Catches JS errors without hiding UI and keeps the app running */}
+      <ThemeProvider defaultTheme="dark">
+        <App />
+      </ThemeProvider>
+    </ErrorBoundary>
+  </StrictMode>
+);
--- a/resources/[core]/esx_menu_default/web/src/providers/errorBoundary.tsx
+++ b/resources/[core]/esx_menu_default/web/src/providers/errorBoundary.tsx
@@ -0,0 +1,25 @@
+// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/providers/errorBoundary.tsx
+import { fetchNui } from '@/utils/fetchNui';
+import { Component, ReactNode, ErrorInfo } from 'react';
+
+class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
+    constructor(props: { children: ReactNode }) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(err: Error) {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: Error, info: ErrorInfo) {
+        console.error(error, info)
+        this.setState({ hasError: false });
+    }
+
+    render() {
+        return this.state.hasError ? null : this.props.children;
+    }
+}
+
+export default ErrorBoundary;
--- a/resources/[core]/esx_menu_default/web/src/providers/themeProvider.tsx
+++ b/resources/[core]/esx_menu_default/web/src/providers/themeProvider.tsx
@@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+    children: React.ReactNode
+    defaultTheme?: Theme
+    storageKey?: string
+}
+
+type ThemeProviderState = {
+    theme: Theme
+    setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+    theme: "system",
+    setTheme: () => null,
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+    children,
+    defaultTheme = "system",
+    storageKey = "vite-ui-theme",
+    ...props
+}: ThemeProviderProps) {
+    const [theme, setTheme] = useState<Theme>(
+        () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    )
+
+    useEffect(() => {
+        const root = window.document.documentElement
+
+        root.classList.remove("light", "dark")
+
+        if (theme === "system") {
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+                .matches
+                ? "dark"
+                : "light"
+
+            root.classList.add(systemTheme)
+            return
+        }
+
+        root.classList.add(theme)
+    }, [theme])
+
+    const value = {
+        theme,
+        setTheme: (theme: Theme) => {
+            localStorage.setItem(storageKey, theme)
+            setTheme(theme)
+        },
+    }
+
+    return (
+        <ThemeProviderContext.Provider {...props} value={value}>
+            {children}
+        </ThemeProviderContext.Provider>
+    )
+}
+
+export const useTheme = () => {
+    const context = useContext(ThemeProviderContext)
+
+    if (context === undefined)
+        throw new Error("useTheme must be used within a ThemeProvider")
+
+    return context
+}
--- a/resources/[core]/esx_menu_default/web/src/utils/debugData.ts
+++ b/resources/[core]/esx_menu_default/web/src/utils/debugData.ts
@@ -0,0 +1,31 @@
+// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/utils/debugData.ts
+import { isEnvBrowser } from './misc';
+
+interface DebugEvent<T = any> {
+    action: string;
+    data: T;
+}
+
+/**
+ * Emulates dispatching an event using SendNuiMessage in the lua scripts.
+ * This is used when developing in browser
+ *
+ * @param events - The event you want to cover
+ * @param timer - How long until it should trigger (ms)
+ */
+export const debugData = <P>(events: DebugEvent<P>[], timer = 1000): void => {
+    if (process.env.NODE_ENV === 'development' && isEnvBrowser()) {
+        for (const event of events) {
+            setTimeout(() => {
+                window.dispatchEvent(
+                    new MessageEvent('message', {
+                        data: {
+                            action: event.action,
+                            data: event.data,
+                        },
+                    })
+                );
+            }, timer);
+        }
+    }
+};
--- a/resources/[core]/esx_menu_default/web/src/utils/fetchNui.ts
+++ b/resources/[core]/esx_menu_default/web/src/utils/fetchNui.ts
@@ -0,0 +1,36 @@
+// yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/utils/fetchNui.ts
+/**
+ * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction
+ * can be extended to include AbortController if needed or if the response isn't
+ * JSON. Tailor it to your needs.
+ *
+ * @param eventName - The endpoint eventname to target
+ * @param data - Data you wish to send in the NUI Callback
+ *
+ * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
+ */
+
+const fetch = window.fetch;
+// @ts-expect-error
+window.fetch = () => {};
+// @ts-expect-error
+window.XMLHttpRequest = window.fetch;
+
+export async function fetchNui<T = any>(eventName: string, data?: any): Promise<T> {
+  const options = {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json; charset=UTF-8',
+    },
+    body: JSON.stringify(data),
+  };
+
+  const resourceName = (window as any).GetParentResourceName
+    ? (window as any).GetParentResourceName()
+    : 'err_boilerplate';
+
+  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+  const respFormatted = await resp.json();
+
+  return respFormatted;
+}
--- a/resources/[core]/esx_menu_default/web/src/utils/getPosition.ts
+++ b/resources/[core]/esx_menu_default/web/src/utils/getPosition.ts
@@ -0,0 +1,27 @@
+export const GetPosition = (pos: string) => {
+
+    pos = pos ? pos : "right-center"
+
+    if (pos == "center") {
+        return "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+    }
+
+    const classes: string[] = [];
+
+
+    if (pos.includes("top")) {
+        classes.push("top-4");
+    } else if (pos.includes("center")) {
+        classes.push("top-1/2", "-translate-y-1/2");
+    } else {
+        classes.push("bottom-4");
+    }
+
+    if (pos.includes("left")) {
+        classes.push("left-4");
+    } else {
+        classes.push("right-4");
+    }
+
+    return classes.join(" ");
+}
--- a/resources/[core]/esx_menu_default/web/src/utils/misc.ts
+++ b/resources/[core]/esx_menu_default/web/src/utils/misc.ts
@@ -0,0 +1,41 @@
+// Will return whether the current environment is in a regular browser
+
+import { useEffect, useState } from "react";
+
+// and not CEF
+export const isEnvBrowser = (): boolean => !(window as any).invokeNative;
+
+// Basic no operation function
+export const noop = () => { };
+
+export const IsInputFocused = () => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    useEffect(() => {
+        const checkFocused = () => {
+            const element = document.activeElement as HTMLElement | null;
+
+            if (element) {
+                setIsFocused(
+                    element.tagName == "INPUT" ||
+                    element.tagName == "TEXTAREA" ||
+                    element.tagName == "SELECT"
+                );
+            } else {
+                setIsFocused(false);
+            }
+        };
+
+        document.addEventListener("focusin", checkFocused);
+        document.addEventListener("focusout", checkFocused);
+
+        checkFocused();
+
+        return () => {
+            document.removeEventListener("focusin", checkFocused);
+            document.removeEventListener("focusout", checkFocused);
+        };
+    }, []);
+
+    return isFocused;
+};
--- a/resources/[core]/esx_menu_default/web/src/vite-env.d.ts
+++ b/resources/[core]/esx_menu_default/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/resources/[core]/esx_menu_default/web/tailwind.config.js
+++ b/resources/[core]/esx_menu_default/web/tailwind.config.js
@@ -0,0 +1,67 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["selector", "class"],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
--- a/resources/[core]/esx_menu_default/web/tsconfig.json
+++ b/resources/[core]/esx_menu_default/web/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/resources/[core]/esx_menu_default/web/tsconfig.node.json
+++ b/resources/[core]/esx_menu_default/web/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/resources/[core]/esx_menu_default/web/vite.config.ts
+++ b/resources/[core]/esx_menu_default/web/vite.config.ts
@@ -0,0 +1,34 @@
+import * as path from "path";
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    postcss: {
+      plugins: [
+        tailwindcss,
+        autoprefixer,
+      ],
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 3000,
+  },
+  base: './',
+  build: {
+    outDir: 'build',
+    target: 'esnext',
+  },
+  esbuild: {
+    logOverride: { 'this-is-undefined-in-esm': 'silent' },
+  },
+});