FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 23:46: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 }) => { 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>

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

@@ -104,24 +104,28 @@ 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} />
<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}> <FocusTrap active={visible}>
<Stack direction="column" p={2} overflowY="scroll"> <Stack direction="column" p={2} overflowY="scroll">
{menu.items.map((item, index) => ( {menu.items.map((item, index) => (
@@ -136,6 +140,7 @@ const ListMenu: React.FC = () => {
</Stack> </Stack>
</FocusTrap> </FocusTrap>
</Box> </Box>
</Box>
</> </>
); );
}; };