starred/esx_core-esx-framework
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-08-29 01:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added auto scroll and maximum height, logo to right corner of title

Browse Source
This commit is contained in:
Kr3mu
2025-08-26 17:41:02 +02:00
parent 15d9c07043
commit 0b8637b6a5
6 changed files with 72 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_menu_default/web/build/assets/index-BA7N3BXr.css → [core]/esx_menu_default/web/build/assets/index-CFgRLOwP.css
+1 -1
View File
File diff suppressed because one or more lines are too long
[core]/esx_menu_default/web/build/assets/index-BbP4Cwt2.js → [core]/esx_menu_default/web/build/assets/index-D4qEeGwz.js
+15 -15
View File
File diff suppressed because one or more lines are too long
[core]/esx_menu_default/web/build/index.html
+2 -2
View File
@@ -7,8 +7,8 @@
<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>
<script type="module" crossorigin src="./assets/index-BbP4Cwt2.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BA7N3BXr.css">
<script type="module" crossorigin src="./assets/index-D4qEeGwz.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-CFgRLOwP.css">
</head>
<body>
[core]/esx_menu_default/web/src/components/menu-button.tsx
+1 -2
View File
@@ -15,8 +15,7 @@ const MenuButton: React.FC<Props> = ({
icon,
isSelected,
}) => {
const base =
"rounded-[4px] flex items-center p-4 gap-4 justify-between transition-all";
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";
[core]/esx_menu_default/web/src/components/menu-slider.tsx
+1 -2
View File
@@ -17,8 +17,7 @@ const MenuSlider: React.FC<Props> = ({ element, isSelected }) => {
} = element;
const value = element.value ?? min;
const base =
"rounded-[4px] flex items-center p-4 gap-4 justify-between transition-all";
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";
[core]/esx_menu_default/web/src/components/menu.tsx
+52 -24
View File
@@ -1,4 +1,4 @@
import { useReducer, useState } from "react";
import { useReducer, useState, useRef, useEffect } from "react";
import { fetchNui } from "@/utils/fetchNui";
import { useControls } from "@/hooks/useControls";
import { MenuData } from "@/app/App";
@@ -13,6 +13,8 @@ interface Props {
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 = () => ({
@@ -51,31 +53,57 @@ const Menu: React.FC<Props> = ({ data }) => {
changeRight: () => stepSelectedSlider(1),
});
useEffect(() => {
const el = itemRefs.current[position];
if (el) {
el.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "nearest",
});
}
}, [position]);
return (
<div className={`absolute ${GetPosition(data.align)}`}>
<div className="w-[26rem] h-fit bg-[#161616] p-4 rounded-[10px] flex flex-col gap-4">
<h1
className="font-bold uppercase text-xl my-2 text-neutral-100"
dangerouslySetInnerHTML={{ __html: data.title }}
/>
{elements.map((element, index) => {
const isSelected = index === position;
return element.type === "slider" ? (
<MenuSlider
key={`slider-${element.name || element.label}-${index}`}
element={element}
isSelected={isSelected}
/>
) : (
<MenuButton
key={`button-${element.name || element.label}-${index}`}
label={element.label}
description={element.description}
icon={element.icon}
isSelected={isSelected}
/>
);
})}
<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
label={element.label}
description={element.description}
icon={element.icon}
isSelected={isSelected}
/>
)}
</div>
);
})}
</div>
</div>
</div>
);