From 700fdbc3fe6d806f900f355388e973744d53a6b2 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Fri, 29 Jul 2022 18:35:21 +0200
Subject: [PATCH] refactor(web/menu): separate header and body divs

This allows for the header to be visible even when scrolling through the menu items
---
 web/src/features/menu/list/Header.tsx | 10 ++++-
 web/src/features/menu/list/index.tsx  | 57 +++++++++++++++------------
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/web/src/features/menu/list/Header.tsx b/web/src/features/menu/list/Header.tsx
index 40c8d83..c91af76 100644
--- a/web/src/features/menu/list/Header.tsx
+++ b/web/src/features/menu/list/Header.tsx
@@ -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>
diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
index 25ff06a..2278f78 100644
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -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>
     </>
   );