Voldemar/honey-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide navigation on keyboard visible
All checks were successful
Deploy to VPS (dist) / deploy (push) Successful in 1m35s
Details

Browse Source
This commit is contained in:
Hewston Fox
2026-03-22 16:42:22 +02:00
parent 082b9bb714
commit de711a407f
1 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/-/RootLayout/components/Navigation/Navigation.tsx
View File

@@ -168,9 +168,19 @@ export default function Navigation() {
const [menuOpen, setMenuOpen] = useState<number>(0); const [menuOpen, setMenuOpen] = useState<number>(0);
const navRef = useRef<HTMLDivElement>(null); const navRef = useRef<HTMLDivElement>(null);
const viewportHeight = useTelegramViewportValue("height"); const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
const stableHeight = useTelegramViewportValue("stableHeight");
const isKeyboardVisible = stableHeight - viewportHeight > 100; 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) => { const handleOutsideClick = useCallback((e: MouseEvent) => {
if (navRef.current && !navRef.current.contains(e.target as Node)) { if (navRef.current && !navRef.current.contains(e.target as Node)) {