refactor(web/menu): radial menu visibility handling

web/src/features/dev/debug/radial.ts

@@ -0,0 +1,20 @@
+import { debugData } from '../../../utils/debugData';
+import type { MenuItem } from '../../menu/radial';
+
+export const debugRadial = () => {
+  debugData<{ items: MenuItem[]; sub?: boolean }>([
+    {
+      action: 'openRadialMenu',
+      data: {
+        items: [
+          // TODO: Fix wheel being broken when there's only one item
+          { icon: 'palette', label: 'Paint' },
+          { icon: 'warehouse', label: 'Garage' },
+          { icon: 'palette', label: 'Quite long text' },
+          { icon: 'palette', label: 'Paint' },
+          { icon: 'warehouse', label: 'Garage' },
+        ],
+      },
+    },
+  ]);
+};

web/src/features/dev/index.tsx

@@ -9,6 +9,7 @@ import { debugCircleProgressbar, debugProgressbar } from './debug/progress';
 import { debugTextUI } from './debug/textui';
 import { debugSkillCheck } from './debug/skillcheck';
 import { useState } from 'react';
+import { debugRadial } from './debug/radial';
 
 const Dev: React.FC = () => {
   const [opened, setOpened] = useState(false);
@@ -46,6 +47,9 @@ const Dev: React.FC = () => {
           <Button fullWidth onClick={() => debugMenu()}>
             Open list menu
           </Button>
+          <Button fullWidth onClick={() => debugRadial()}>
+            Open radial menu
+          </Button>
           <Divider />
           <Button fullWidth onClick={() => debugCustomNotification()}>
             Send notification

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

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { useNuiEvent } from '../../../hooks/useNuiEvent';
 import { debugData } from '../../../utils/debugData';
 import { fetchNui } from '../../../utils/fetchNui';
+import ScaleFade from '../../../transitions/ScaleFade';
 
 const radius = 60;
 
@@ -18,29 +19,11 @@ function getTransform(index: number, totalItems: number) {
   return `translate(${x}px, ${y}px)`;
 }
 
-interface MenuItem {
+export interface MenuItem {
   icon: IconProp;
   label: string;
 }
 
-debugData<{ items: MenuItem[]; sub?: boolean }>([
-  {
-    action: 'openRadialMenu',
-    data: {
-      items: [
-        // TODO: Fix wheel being broken when there's only one item
-        { icon: 'palette', label: 'Paint' },
-        { icon: 'warehouse', label: 'Garage' },
-        { icon: 'palette', label: 'Quite long text' },
-        { icon: 'palette', label: 'Paint' },
-        { icon: 'warehouse', label: 'Garage' },
-      ],
-
-      sub: false,
-    },
-  },
-]);
-
 const useStyles = createStyles((theme) => ({
   wrapper: {
     position: 'absolute',
@@ -103,6 +86,7 @@ const RadialMenu: React.FC = () => {
   return (
     <>
       <Box className={classes.wrapper}>
+        <ScaleFade visible={visible}>
           <svg width="350px" height="350px" transform="rotate(90)">
             {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
             {menu.items.length >= 3 && (
@@ -142,7 +126,7 @@ const RadialMenu: React.FC = () => {
                 </>
               );
             })}
-          <g transform="translate(175, 175)">
+            <g transform="translate(175, 175)" onClick={() => setVisible(false)}>
               <circle r={30} className={classes.centerCircle} />
             </g>
             <FontAwesomeIcon
@@ -155,6 +139,7 @@ const RadialMenu: React.FC = () => {
               y={175 - 28 / 2}
             />
           </svg>
+        </ScaleFade>
       </Box>
     </>
   );