df2ccd9840
* live comments: stable navigator for new outlined comments * navigator keyboard shortcuts: arrow right/escape key * enhance: responsive fixed positioning; cleanup enhance: - two types of padding for desktop and mobile via CSS cleanup: - use appropriate <aside> for navigator - reorder CSS * Comments Navigator Context, new comments dot UI, refs autosorting, auto-untrack children - Navigator Context for item pages UI/UX - WIP: compact comments dot UI on navbars - long press to clear tracked refs - auto-untrack node's children on scroll Logic - auto-sort comment refs via createdAt - remove outline on untrack if called by scroll * stable navigator dot UI positioning * cleanup: better naming, clear structure * CSS visibility tweaks * scroll to start position of ref * fix undefined navigator on other comment calls * remove pulse animation
30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
import { Nav, Navbar } from 'react-bootstrap'
|
|
import styles from '../../header.module.css'
|
|
import { Back, NavPrice, NavSelect, NavWalletSummary, SignUpButton, hasNavSelect } from '../common'
|
|
import { useMe } from '@/components/me'
|
|
import { useCommentsNavigatorContext, CommentsNavigator } from '@/components/use-comments-navigator'
|
|
|
|
export default function TopBar ({ prefix, sub, path, pathname, topNavKey, dropNavKey }) {
|
|
const { me } = useMe()
|
|
const { navigator, commentCount } = useCommentsNavigatorContext()
|
|
|
|
return (
|
|
<Navbar>
|
|
<Nav
|
|
className={styles.navbarNav}
|
|
activeKey={topNavKey}
|
|
>
|
|
<Back className='d-flex d-md-none' />
|
|
{hasNavSelect({ path, pathname })
|
|
? <NavSelect sub={sub} className='w-100' />
|
|
: (
|
|
<>
|
|
<NavPrice className='flex-shrink-1' />
|
|
<CommentsNavigator navigator={navigator} commentCount={commentCount} className='px-2' />
|
|
{me ? <NavWalletSummary /> : <SignUpButton width='fit-content' />}
|
|
</>)}
|
|
</Nav>
|
|
</Navbar>
|
|
)
|
|
}
|