From 6ef17e83f550cd31eb8c7687b11763ede9a8f1c5 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sun, 31 Jul 2022 13:34:40 +0200
Subject: [PATCH] feat(web/menu): visibility handling

---
 resource/interface/client/menu.lua   | 25 +++++++---
 web/src/features/menu/list/index.tsx | 74 ++++++++++++++--------------
 2 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/resource/interface/client/menu.lua b/resource/interface/client/menu.lua
index d908892..61714ce 100644
--- a/resource/interface/client/menu.lua
+++ b/resource/interface/client/menu.lua
@@ -36,13 +36,12 @@ end)
 
 RegisterNUICallback('changeSelected', function(data, cb)
     cb(1)
-    if registeredMenus[openMenu].onChange then
-        local selected = data
-        if type(selected) == 'number' then
-            registeredMenus[openMenu].onChange(selected)
-        else
-            registeredMenus[openMenu].onChange(selected[1], selected[2])
-        end
+    if not registeredMenus[openMenu].onChange then return end
+    local selected = data
+    if type(selected) == 'number' then
+        registeredMenus[openMenu].onChange(selected)
+    else
+        registeredMenus[openMenu].onChange(selected[1], selected[2])
     end
 end)
 
@@ -50,7 +49,6 @@ RegisterCommand('testMenu', function()
     lib.registerMenu({
         id = 'epic_menu',
         title = 'Nice menu',
-        position = 'top-right',
         onChange = function(selected, scrollIndex)
             print(selected, scrollIndex)
         end,
@@ -60,6 +58,17 @@ RegisterCommand('testMenu', function()
         }
     }, function(selected, scrollIndex)
         print(selected, scrollIndex)
+        lib.registerMenu({
+            id = 'more_epic_menu',
+            title = 'Nicer menu',
+            position = 'top-right',
+            options = {
+                {label = 'Extra nice option'},
+                {label = 'Giga nice option'},
+                {label = 'Omega nice option'},
+            }
+        }, function() end)
+        lib.showMenu('more_epic_menu')
     end)
     lib.showMenu('epic_menu')
 end)
\ No newline at end of file
diff --git a/web/src/features/menu/list/index.tsx b/web/src/features/menu/list/index.tsx
index 42af9a6..1b48fec 100644
--- a/web/src/features/menu/list/index.tsx
+++ b/web/src/features/menu/list/index.tsx
@@ -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>
+      )}
     </>
   );
 };