66 lines
2.0 KiB
JavaScript
66 lines
2.0 KiB
JavaScript
import { Nav, Navbar } from 'react-bootstrap'
|
|
import { Brand, NavNotifications, PostItem, SearchItem } from '../common'
|
|
import { useMe } from '../../me'
|
|
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.innerHeight - 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 me = useMe()
|
|
const isKeyboardOpen = useDetectKeyboardOpen(200, false)
|
|
|
|
if (isKeyboardOpen) {
|
|
return null
|
|
}
|
|
|
|
const path = router.asPath.split('?')[0]
|
|
const props = {
|
|
prefix: sub ? `/~${sub}` : '',
|
|
path,
|
|
topNavKey: path.split('/')[sub ? 2 : 1] ?? '',
|
|
dropNavKey: path.split('/').slice(sub ? 2 : 1).join('/'),
|
|
sub
|
|
}
|
|
|
|
return (
|
|
<nav className='d-block d-md-none'>
|
|
<div style={{ marginBottom: '53px' }} className={styles.footerPadding} />
|
|
<div className={classNames(styles.footer, styles.footerPadding)}>
|
|
<Navbar className='container px-0'>
|
|
<Nav className={styles.footerNav}>
|
|
<Brand />
|
|
<SearchItem {...props} />
|
|
<PostItem {...props} className='btn-sm' />
|
|
<NavNotifications />
|
|
<Offcanvas me={me} {...props} />
|
|
</Nav>
|
|
</Navbar>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|