From de711a407fe44fa2a50c137763ed20e94ad3a579 Mon Sep 17 00:00:00 2001 From: Hewston Fox Date: Sun, 22 Mar 2026 16:42:22 +0200 Subject: [PATCH] fix: hide navigation on keyboard visible --- .../components/Navigation/Navigation.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/routes/-/RootLayout/components/Navigation/Navigation.tsx b/src/routes/-/RootLayout/components/Navigation/Navigation.tsx index 5cd850d..846c9aa 100644 --- a/src/routes/-/RootLayout/components/Navigation/Navigation.tsx +++ b/src/routes/-/RootLayout/components/Navigation/Navigation.tsx @@ -168,9 +168,19 @@ export default function Navigation() { const [menuOpen, setMenuOpen] = useState(0); const navRef = useRef(null); - const viewportHeight = useTelegramViewportValue("height"); - const stableHeight = useTelegramViewportValue("stableHeight"); - const isKeyboardVisible = stableHeight - viewportHeight > 100; + const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); + + useEffect(() => { + const vv = window.visualViewport; + if (!vv) return; + + const onResize = () => { + setIsKeyboardVisible(vv.height < window.innerHeight * 0.75); + }; + + vv.addEventListener("resize", onResize); + return () => vv.removeEventListener("resize", onResize); + }, []); const handleOutsideClick = useCallback((e: MouseEvent) => { if (navRef.current && !navRef.current.contains(e.target as Node)) {