From d5a018e48dfdfa5c793a0bbb85e9cd036efada94 Mon Sep 17 00:00:00 2001
From: keyan <keyan.kousha+huumn@gmail.com>
Date: Thu, 28 Mar 2024 16:03:45 -0500
Subject: [PATCH] hide bottom navigation when virtual keyboard is shown

---
 components/nav/mobile/footer.js | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/components/nav/mobile/footer.js b/components/nav/mobile/footer.js
index 59bbb43d..aba311fb 100644
--- a/components/nav/mobile/footer.js
+++ b/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'>