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

refactor(web/menu): separate header and body divs

Browse Source 
This allows for the header to be visible even when scrolling through the menu items
This commit is contained in:
Luke
2022-07-29 18:35:21 +02:00
committed by Luke
parent a43b5eee04
commit 700fdbc3fe
2 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/features/menu/list/Header.tsx
View File

@@ -2,7 +2,15 @@ import { Box, Text } from "@chakra-ui/react";
const Header: React.FC<{ title: string }> = ({ title }) => {
return (
<Box p={3} textAlign="center" borderTopLeftRadius="md" borderTopRightRadius="md" bg="#25262B">
<Box
p={3}
textAlign="center"
borderTopLeftRadius="md"
borderTopRightRadius="md"
bg="#25262B"
height="60px"
width="sm"
>
<Text fontSize={24} textTransform="uppercase" fontWeight={300} fontFamily="Poppins">
{title}
</Text>

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

@@ -104,37 +104,42 @@ const ListMenu: React.FC = () => {
return (
<>
<Box
width="sm"
height="fit-content"
maxHeight={480}
overflow="hidden"
borderRadius="md"
bg="#141517"
position="absolute"
fontFamily="Nunito"
onKeyDown={(e) => moveMenu(e)}
mt={menu.position === "top-left" || menu.position === "top-right" ? 5 : 0}
ml={menu.position === "top-left" || menu.position === "bottom-left" ? 5 : 0}
mr={menu.position === "top-right" || menu.position === "bottom-right" ? 5 : 0}
mb={menu.position === "bottom-left" || menu.position === "bottom-right" ? 5 : 0}
right={menu.position === "top-right" ? 1 : undefined}
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} />
<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
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>
</>
);