stacker.news/components/nav/sticky-bar.js

59 lines
1.8 KiB
JavaScript

import { useEffect, useRef } from 'react'
import styles from '@/components/header.module.css'
import { Container, Nav, Navbar } from 'react-bootstrap'
import { NavPrice, MeCorner, AnonCorner, SearchItem, Back, NavWalletSummary, Brand, SignUpButton } from './common'
import { useMe } from '@/components/me'
import classNames from 'classnames'
export default function StickyBar ({ prefix, sub, path, topNavKey, dropNavKey }) {
const ref = useRef()
const me = useMe()
useEffect(() => {
const stick = () => {
if (window.scrollY > 100) {
ref.current?.classList.remove(styles.hide)
} else {
ref.current?.classList.add(styles.hide)
}
}
window.addEventListener('scroll', stick)
return () => {
window.removeEventListener('scroll', stick)
}
}, [ref?.current])
return (
<div className={classNames(styles.hide, styles.sticky)} ref={ref}>
<Container className='px-0 d-none d-md-block'>
<Navbar className='py-0'>
<Nav
className={styles.navbarNav}
activeKey={topNavKey}
>
<Back />
<Brand className='me-1' />
<SearchItem className='me-0 ms-2' />
<NavPrice />
{me ? <MeCorner dropNavKey={dropNavKey} me={me} className='d-flex' /> : <AnonCorner path={path} className='d-flex' />}
</Nav>
</Navbar>
</Container>
<Container className='px-sm-0 d-block d-md-none'>
<Navbar className='py-0'>
<Nav
className={classNames(styles.navbarNav, 'justify-content-between')}
activeKey={topNavKey}
>
<Back />
<NavPrice className='flex-shrink-1 flex-grow-0' />
{me ? <NavWalletSummary className='px-2' /> : <SignUpButton />}
</Nav>
</Navbar>
</Container>
</div>
)
}