wip: navbar refactor and improvements

components/header.module.css

@@ -72,7 +72,7 @@
 .navbarNav {
     width: 100%;
     align-items: center;
-    height: 39px;
+    height: var(--navbar-height);
     align-content: center;
 }
 
@@ -101,12 +101,21 @@
     padding-left: 0 !important;
 }
 
+.navbarSpacer {
+    height: var(--navbar-total-height);
+}
+
 .sticky {
     position: fixed;
-    border-bottom: 1px solid var(--theme-toolbarActive);
-    width: 100vw;
-    top: -1px;
-    padding-top: 1px;
+    left: 0;
+    right: 0;
+    top: 0;
+    padding-top: var(--navbar-padding-top);
     background-color: var(--bs-body-bg);
+    border-bottom: var(--navbar-border-width) solid transparent;
     z-index: 1000;
 }
+
+.sticky.scrolled {
+    border-bottom-color: var(--theme-toolbarActive);
+}

components/nav/desktop/top-bar.js

@@ -1,27 +1,39 @@
-import { Nav, Navbar } from 'react-bootstrap'
+import { Nav, Navbar, Container } from 'react-bootstrap'
 import styles from '../../header.module.css'
 import { AnonCorner, Back, Brand, MeCorner, NavPrice, SearchItem } from '../common'
 import { useMe } from '../../me'
 import { useCommentsNavigatorContext, CommentsNavigator } from '@/components/use-comments-navigator'
+import classNames from 'classnames'
+import { useScrollThreshold } from '@/components/use-scroll-threshold'
 
 export default function TopBar ({ prefix, sub, path, topNavKey, dropNavKey }) {
   const { me } = useMe()
   const { navigator, commentCount } = useCommentsNavigatorContext()
+  const { sentinelRef, past } = useScrollThreshold(0)
+
   return (
-    <Navbar>
-      <Nav
-        className={styles.navbarNav}
-        activeKey={topNavKey}
-      >
-        <Back />
-        <Brand className='me-1' />
-        <SearchItem prefix={prefix} className='me-0 ms-2 d-none d-md-flex' />
-        <NavPrice className='ms-auto me-0 mx-md-auto d-none d-md-flex' />
-        <CommentsNavigator navigator={navigator} commentCount={commentCount} />
-        {me
-          ? <MeCorner dropNavKey={dropNavKey} me={me} className='d-none d-md-flex' />
-          : <AnonCorner path={path} className='d-none d-md-flex' />}
-      </Nav>
-    </Navbar>
+    <>
+      <div ref={sentinelRef} style={{ height: 1 }} />
+      <div className={styles.navbarSpacer} />
+      <div className={classNames(styles.sticky, past && styles.scrolled)}>
+        <Container className='px-0'>
+          <Navbar className='py-0'>
+            <Nav
+              className={styles.navbarNav}
+              activeKey={topNavKey}
+            >
+              <Back />
+              <Brand className='me-1' />
+              <SearchItem prefix={prefix} className='me-0 ms-2 d-none d-md-flex' />
+              <NavPrice className='ms-auto me-0 mx-md-auto d-none d-md-flex' />
+              <CommentsNavigator navigator={navigator} commentCount={commentCount} />
+              {me
+                ? <MeCorner dropNavKey={dropNavKey} me={me} className='d-none d-md-flex' />
+                : <AnonCorner path={path} className='d-none d-md-flex' />}
+            </Nav>
+          </Navbar>
+        </Container>
+      </div>
+    </>
   )
 }

components/nav/index.js

@@ -1,7 +1,6 @@
 import { useRouter } from 'next/router'
 import DesktopHeader from './desktop/header'
 import MobileHeader from './mobile/header'
-import StickyBar from './sticky-bar'
 import { PriceCarouselProvider } from './price-carousel'
 
 export default function Navigation ({ sub }) {
@@ -20,7 +19,6 @@ export default function Navigation ({ sub }) {
     <PriceCarouselProvider>
       <DesktopHeader {...props} />
       <MobileHeader {...props} />
-      <StickyBar {...props} />
     </PriceCarouselProvider>
   )
 }

components/nav/mobile/header.js

@@ -1,13 +1,13 @@
 import { Container } from 'react-bootstrap'
 import TopBar from './top-bar'
-import SecondBar from './second-bar'
+import NavSelectBar from './navselect-bar'
 
 export default function Header (props) {
   return (
     <div className='d-block d-md-none'>
       <Container as='header' className='px-sm-0'>
+        <NavSelectBar {...props} />
         <TopBar {...props} />
-        <SecondBar {...props} />
       </Container>
     </div>
   )

components/nav/mobile/navselect-bar.js

@@ -0,0 +1,22 @@
+import { Nav, Navbar } from 'react-bootstrap'
+import styles from '../../header.module.css'
+import { Back, NavSelect, hasNavSelect } from '../common'
+import SecondBar from './second-bar'
+
+export default function NavSelectBar ({ sub, topNavKey, path, pathname }) {
+  if (!hasNavSelect({ path, pathname })) return null
+  return (
+    <>
+      <Navbar>
+        <Nav
+          className={styles.navbarNav}
+          activeKey={topNavKey}
+        >
+          <Back className='d-flex d-md-none' />
+          <NavSelect sub={sub} className='w-100' />
+        </Nav>
+      </Navbar>
+      <SecondBar topNavKey={topNavKey} />
+    </>
+  )
+}

components/nav/mobile/second-bar.js

@@ -1,12 +1,12 @@
 import { Nav, Navbar } from 'react-bootstrap'
-import { NavPrice, NavWalletSummary, Sorts, hasNavSelect } from '../common'
+import { NavPrice, NavWalletSummary, Sorts } from '../common'
 import styles from '../../header.module.css'
 import { useMe } from '@/components/me'
 
 export default function SecondBar (props) {
   const { me } = useMe()
   const { topNavKey } = props
-  if (!hasNavSelect(props)) return null
+
   return (
     <Navbar>
       <Nav

components/nav/mobile/top-bar.js

@@ -1,29 +1,36 @@
-import { Nav, Navbar } from 'react-bootstrap'
+import { Nav, Navbar, Container } from 'react-bootstrap'
 import styles from '../../header.module.css'
-import { Back, NavPrice, NavSelect, NavWalletSummary, SignUpButton, hasNavSelect } from '../common'
+import { Back, NavPrice, NavWalletSummary, SignUpButton, hasNavSelect } from '../common'
 import { useMe } from '@/components/me'
 import { useCommentsNavigatorContext, CommentsNavigator } from '@/components/use-comments-navigator'
+import classNames from 'classnames'
+import { useScrollThreshold } from '@/components/use-scroll-threshold'
 
 export default function TopBar ({ prefix, sub, path, pathname, topNavKey, dropNavKey }) {
   const { me } = useMe()
   const { navigator, commentCount } = useCommentsNavigatorContext()
+  const showNavSelect = hasNavSelect({ path, pathname })
+  const { sentinelRef, past } = useScrollThreshold(0)
 
   return (
-    <Navbar>
-      <Nav
-        className={styles.navbarNav}
-        activeKey={topNavKey}
-      >
-        <Back className='d-flex d-md-none' />
-        {hasNavSelect({ path, pathname })
-          ? <NavSelect sub={sub} className='w-100' />
-          : (
-            <>
+    <>
+      <div ref={sentinelRef} style={{ height: 1 }} />
+      {!showNavSelect && <div className={styles.navbarSpacer} />}
+      <div className={classNames(styles.sticky, past && styles.scrolled, showNavSelect && !past && styles.hide)}>
+        <Container className='px-sm-0'>
+          <Navbar className='py-0'>
+            <Nav
+              className={styles.navbarNav}
+              activeKey={topNavKey}
+            >
+              <Back className='d-flex d-md-none' />
               <NavPrice className='flex-shrink-1' />
               <CommentsNavigator navigator={navigator} commentCount={commentCount} className='px-2' />
               {me ? <NavWalletSummary /> : <SignUpButton width='fit-content' />}
-            </>)}
-      </Nav>
-    </Navbar>
+            </Nav>
+          </Navbar>
+        </Container>
+      </div>
+    </>
   )
 }

components/use-scroll-threshold.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useScrollThreshold (offset = 0) {
+  const [past, setPast] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const observer = new window.IntersectionObserver(([entry]) => {
+      setPast(!entry.isIntersecting)
+    }, { root: null, rootMargin: `${offset}px 0px 0px 0px`, threshold: 0 })
+
+    observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [offset])
+
+  return { sentinelRef: ref, past }
+}

styles/globals.scss

@@ -181,6 +181,13 @@ $zindex-sticky: 900;
   --theme-note-fresh: rgba(0, 124, 190, 0.75);
 }
 
+:root {
+  --navbar-height: 39px;
+  --navbar-padding-top: 0.25rem;
+  --navbar-border-width: 1px;
+  --navbar-total-height: calc(var(--navbar-height) + var(--navbar-padding-top) + var(--navbar-border-width));
+}
+
 @import '../node_modules/bootstrap/scss/bootstrap.scss';
 
 @media screen and (min-width: 899px) {