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> ) }