FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 15:36:02 +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 }) => { const Header: React.FC<{ title: string }> = ({ title }) => {
return ( 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"> <Text fontSize={24} textTransform="uppercase" fontWeight={300} fontFamily="Poppins">
{title} {title}
</Text> </Text>

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

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