fix: hide navigation on keyboard visible
Some checks failed
Deploy to VPS (dist) / deploy (push) Has been cancelled
Some checks failed
Deploy to VPS (dist) / deploy (push) Has been cancelled
This commit is contained in:
@@ -168,20 +168,6 @@ 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 [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) => {
|
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)) {
|
||||||
setMenuOpen(0);
|
setMenuOpen(0);
|
||||||
@@ -206,8 +192,6 @@ export default function Navigation() {
|
|||||||
setMenuOpen(0);
|
setMenuOpen(0);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isKeyboardVisible) return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={navRef}>
|
<div ref={navRef}>
|
||||||
<div className={classes.menuOverlay}>
|
<div className={classes.menuOverlay}>
|
||||||
|
|||||||
Reference in New Issue
Block a user