From 4d747257b65cb46b6506bc65b18bbe3adff95658 Mon Sep 17 00:00:00 2001 From: martin machiebe <127976766+martinvibes@users.noreply.github.com> Date: Thu, 1 Aug 2024 07:26:32 +0100 Subject: [PATCH] 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 | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/JoyboyCommunity/src/components/Menu/index.tsx b/JoyboyCommunity/src/components/Menu/index.tsx index be6b8213..55eccfce 100644 --- a/JoyboyCommunity/src/components/Menu/index.tsx +++ b/JoyboyCommunity/src/components/Menu/index.tsx @@ -38,7 +38,7 @@ const Menu: React.FC & MenuSubComponents = ({handle, open, onClose, c const handleRef = useAnimatedRef(); 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 & 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 & MenuSubComponents = ({handle, open, onClose, c left: X, }; } - }, [width, animation]); + }, [width, height, animation]); return (