feat(web/menu): initial list menu design

Highly subject to change

web/src/App.tsx

@@ -3,12 +3,13 @@ import CircleProgressbar from "./features/progress/CircleProgressbar";
 import Progressbar from "./features/progress/Progressbar";
 import TextUI from "./features/textui/TextUI";
 import InputDialog from "./features/dialog/InputDialog";
-import ContextMenu from "./features/menu/ContextMenu";
+import ContextMenu from "./features/menu/context/ContextMenu";
 import Settings from "./features/settings";
 import { useNuiEvent } from "./hooks/useNuiEvent";
 import { setClipboard } from "./utils/setClipboard";
 import { fetchNui } from "./utils/fetchNui";
 import AlertDialog from "./features/dialog/AlertDialog";
+import ListMenu from "./features/menu/list";
 
 const App: React.FC = () => {
   useNuiEvent("setClipboard", (data: string) => {
@@ -27,6 +28,7 @@ const App: React.FC = () => {
       <InputDialog />
       <AlertDialog />
       <ContextMenu />
+      <ListMenu />
     </>
   );
 };

web/src/features/menu/context/ContextMenu.tsx

@@ -1,11 +1,11 @@
-import { useNuiEvent } from "../../hooks/useNuiEvent";
+import { useNuiEvent } from "../../../hooks/useNuiEvent";
 import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
-import { debugData } from "../../utils/debugData";
+import { debugData } from "../../../utils/debugData";
 import { useEffect, useState } from "react";
-import { ContextMenuProps } from "../../interfaces/context";
+import { ContextMenuProps } from "../../../interfaces/context";
 import Item from "./Item";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { fetchNui } from "../../utils/fetchNui";
+import { fetchNui } from "../../../utils/fetchNui";
 
 debugData<ContextMenuProps>([
   {

web/src/features/menu/context/Item.tsx

@@ -12,8 +12,8 @@ import {
   HStack,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Option, ContextMenuProps } from "../../interfaces/context";
-import { fetchNui } from "../../utils/fetchNui";
+import { Option, ContextMenuProps } from "../../../interfaces/context";
+import { fetchNui } from "../../../utils/fetchNui";
 
 const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>("openContext", id);

web/src/features/menu/list/index.tsx

@@ -0,0 +1,119 @@
+import { Box, Spacer, Flex, Stack, Text } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { useNuiEvent } from "../../../hooks/useNuiEvent";
+import { debugData } from "../../../utils/debugData";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface MenuSettings {
+  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+  title: string;
+  items: Array<{ label: string; value: string | string[] }>;
+}
+
+debugData<MenuSettings>([
+  {
+    action: "setMenu",
+    data: {
+      //   position: "bottom-left",
+      title: "Vehicle garage",
+      items: [
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+        { label: "Vehicle class", value: ["Nice", "Super nice", "Extra nice"] },
+      ],
+    },
+  },
+]);
+
+const ListMenu: React.FC = () => {
+  const [menu, setMenu] = useState<MenuSettings>({
+    position: "top-left",
+    title: "",
+    items: [],
+  });
+  const [selected, setSelected] = useState(0);
+  const [visible, setVisible] = useState(false);
+
+  const moveMenu = (e: KeyboardEvent) => {
+    switch (e.code) {
+      case "ArrowDown":
+        setSelected((selected) => {
+          if (selected >= menu.items.length - 1) return selected;
+          return selected + 1;
+        });
+        break;
+      case "ArrowUp":
+        setSelected((selected) => {
+          if (selected <= 0) return selected;
+          return selected - 1;
+        });
+        break;
+    }
+  };
+
+  useEffect(() => {
+    if (!visible) return document.removeEventListener("keyup", moveMenu);
+
+    document.addEventListener("keyup", moveMenu);
+  }, [visible]);
+
+  useNuiEvent("setMenu", (data: MenuSettings) => {
+    if (!data.position) data.position = "top-left";
+    setMenu(data);
+    setVisible(true);
+  });
+
+  return (
+    <>
+      <Box
+        width="sm"
+        height="md"
+        borderRadius="md"
+        bg="#141517"
+        position="absolute"
+        fontFamily="Nunito"
+        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}
+        left={menu.position === "bottom-left" ? 1 : undefined}
+        bottom={menu.position === "bottom-left" || menu.position === "bottom-right" ? 1 : undefined}
+      >
+        <Box p={2} textAlign="center" borderTopLeftRadius="md" borderTopRightRadius="md">
+          <Text fontSize={24} textTransform="uppercase" fontWeight={500}>
+            {menu.title}
+          </Text>
+        </Box>
+        <Stack direction="column" p={2}>
+          {menu.items.map((item, index) => (
+            <Box
+              bg={index !== selected ? "#25262B" : "#373A40"}
+              borderRadius="md"
+              tabIndex={index}
+              p={5}
+              key={`item-${index}`}
+            >
+              {Array.isArray(item.value) ? (
+                <Flex justifyContent="center" alignItems="center">
+                  <Stack spacing={1}>
+                    <Text color="#909296" textTransform="uppercase" fontSize={12}>
+                      {item.label}
+                    </Text>
+                    <Text>Nice cool</Text>
+                  </Stack>
+                  <Spacer />
+                  <FontAwesomeIcon icon="arrows-left-right" fontSize={20} color="#909296" />
+                </Flex>
+              ) : (
+                item.label
+              )}
+            </Box>
+          ))}
+        </Stack>
+      </Box>
+    </>
+  );
+};
+
+export default ListMenu;

web/src/index.css

@@ -2,13 +2,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap");
 
 body {
   background: none !important;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
@@ -21,8 +21,7 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 @keyframes progress {
@@ -52,13 +51,13 @@ code {
 }
 
 .toast-inform {
-	background-color: #2980b9;
+  background-color: #2980b9;
 }
 
 .toast-success {
-	background-color: #27ae60;
+  background-color: #27ae60;
 }
 
 .toast-error {
-	background-color: #c0392b;
+  background-color: #c0392b;
 }