hide bottom navigation when virtual keyboard is shown

components/nav/mobile/footer.js

@@ -5,11 +5,39 @@ import styles from './footer.module.css'
 import classNames from 'classnames'
 import Offcanvas from './offcanvas'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+function useDetectKeyboardOpen (minKeyboardHeight = 300, defaultValue) {
+  const [isKeyboardOpen, setIsKeyboardOpen] = useState(defaultValue)
+
+  useEffect(() => {
+    const listener = () => {
+      const newState = window.screen.height - minKeyboardHeight > window.visualViewport.height
+      setIsKeyboardOpen(newState)
+    }
+    if (typeof visualViewport !== 'undefined') {
+      window.visualViewport.addEventListener('resize', listener)
+    }
+    return () => {
+      if (typeof visualViewport !== 'undefined') {
+        window.visualViewport.removeEventListener('resize', listener)
+      }
+    }
+  }, [setIsKeyboardOpen, minKeyboardHeight])
+
+  return isKeyboardOpen
+}
 
 export default function BottomBar ({ sub }) {
   const router = useRouter()
-  const path = router.asPath.split('?')[0]
+  const me = useMe()
+  const isKeyboardOpen = useDetectKeyboardOpen(300, false)
 
+  if (isKeyboardOpen) {
+    return null
+  }
+
+  const path = router.asPath.split('?')[0]
   const props = {
     prefix: sub ? `/~${sub}` : '',
     path,
@@ -17,7 +45,7 @@ export default function BottomBar ({ sub }) {
     dropNavKey: path.split('/').slice(sub ? 2 : 1).join('/'),
     sub
   }
-  const me = useMe()
+
   return (
     <div className={classNames('d-block d-md-none', styles.footer)}>
       <Navbar className='container px-0'>