FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web/menu): visibility handling

Browse Source
This commit is contained in:
Luke
2022-07-31 13:34:40 +02:00
committed by Luke
parent e97bd98726
commit 6ef17e83f5
2 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/features/menu/list/index.tsx
View File

@@ -122,45 +122,47 @@ const ListMenu: React.FC = () => {
return (
<>
<Box
position="absolute"
pointerEvents="none"
pt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
pl={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
pr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
pb={menu.position === "bottom-left" || menu.position === "bottom-right" ? 5 : 0}
right={menu.position === "top-right" || menu.position === "bottom-right" ? 1 : undefined}
left={menu.position === "bottom-left" ? 1 : undefined}
bottom={menu.position === "bottom-left" || menu.position === "bottom-right" ? 1 : undefined}
>
<Header title={menu.title} />
{visible && (
<Box
width="sm"
height="fit-content"
maxHeight={415}
overflow="hidden"
borderRadius="md"
bg="#141517"
fontFamily="Nunito"
borderTopLeftRadius="none"
borderTopRightRadius="none"
onKeyDown={(e) => moveMenu(e)}
position="absolute"
pointerEvents="none"
pt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
pl={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
pr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
pb={menu.position === "bottom-left" || menu.position === "bottom-right" ? 5 : 0}
right={menu.position === "top-right" || menu.position === "bottom-right" ? 1 : undefined}
left={menu.position === "bottom-left" ? 1 : undefined}
bottom={menu.position === "bottom-left" || menu.position === "bottom-right" ? 1 : undefined}
>
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
))}
</Stack>
</FocusTrap>
<Header title={menu.title} />
<Box
width="sm"
height="fit-content"
maxHeight={415}
overflow="hidden"
borderRadius="md"
bg="#141517"
fontFamily="Nunito"
borderTopLeftRadius="none"
borderTopRightRadius="none"
onKeyDown={(e) => moveMenu(e)}
>
<FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => (
<ListItem
index={index}
item={item}
scrollIndex={indexStates[index]}
ref={listRefs}
key={`menu-item-${index}`}
/>
))}
</Stack>
</FocusTrap>
</Box>
</Box>
</Box>
)}
</>
);
};