fix: Ensure the options menu appears correctly relative to the three-…

…dot icon (#295)

* Ensure the options menu appears correctly relative to the three-dot icon

* fix: formating error fixed

JoyboyCommunity/src/components/Menu/index.tsx

@@ -38,7 +38,7 @@ const Menu: React.FC<MenuProps> & MenuSubComponents = ({handle, open, onClose, c
   const handleRef = useAnimatedRef<Animated.View>();
   const animation = useSharedValue(0);
 
-  const {width} = useWindowDimensions();
+  const {width, height} = useWindowDimensions();
 
   useEffect(() => {
     animation.value = withTiming(open ? 1 : 0, {duration: 150});
@@ -58,7 +58,15 @@ const Menu: React.FC<MenuProps> & MenuSubComponents = ({handle, open, onClose, c
     if (!handleBounds) return {};
 
     const X = handleBounds.pageX;
-    const Y = handleBounds.pageY + handleBounds.height + 8;
+    let Y;
+
+    if (handleBounds.pageY + handleBounds.height + 40 > height) {
+      // If the handle is near the bottom, position the menu above the handle
+      Y = handleBounds.pageY - handleBounds.height - 8;
+    } else {
+      // Otherwise, position the menu below the handle
+      Y = handleBounds.pageY + handleBounds.height + 8;
+    }
 
     if (X + menuWidth > width) {
       return {
@@ -73,7 +81,7 @@ const Menu: React.FC<MenuProps> & MenuSubComponents = ({handle, open, onClose, c
         left: X,
       };
     }
-  }, [width, animation]);
+  }, [width, height, animation]);
 
   return (
     <View style={styles.container}>