Refactor sticky nav hook/components

src/app/Nav.tsx

@@ -36,9 +36,8 @@ export default function Nav({
   const showNav = !isPathSignIn(pathname);
 
   const {
-    isNavSticky,
+    classNameStickyContainer,
-    shouldHideStickyNav,
+    classNameStickyNav,
-    shouldAnimateStickyNav,
   } = useStickyNav(ref);
 
   const renderLink = (
@@ -63,9 +62,7 @@ export default function Nav({
 
   return (
     <AppGrid
-      className={clsx(
+      className={classNameStickyContainer}
-        isNavSticky && 'sticky top-0 z-10 pointer-events-none',
-      )}
       classNameMain='pointer-events-auto'
       contentMain={
         <AnimateItems
@@ -77,15 +74,11 @@ export default function Nav({
               key="nav"
               ref={ref}
               className={clsx(
-                'w-full',
+                'w-full flex items-center bg-main',
+                NAV_HEIGHT_CLASS,
                 // Enlarge nav to ensure it fully masks underlying content
                 'md:w-[calc(100%+8px)] md:translate-x-[-4px] md:px-[4px]',
-                'flex items-center bg-main',
+                classNameStickyNav,
-                shouldAnimateStickyNav && 'transition-transform duration-200',
-                shouldHideStickyNav
-                  ? 'translate-y-[-100%]'
-                  : 'translate-y-0',
-                NAV_HEIGHT_CLASS,
               )}>
               <ViewSwitcher
                 currentSelection={switcherSelectionForPath()}

src/app/useStickyNav.ts

@@ -1,15 +1,16 @@
 import useScrollDirection from '@/utility/useScrollDirection';
-import { RefObject } from 'react';
+import clsx from 'clsx/lite';
+import { RefObject, useMemo } from 'react';
 
 export default function useStickyNav(
   ref: RefObject<HTMLElement | null>,
   isEnabled = true,
 ) {
-  const { scrollDirection, lastScrollY } = useScrollDirection();
+  const { scrollDirection, scrollY } = useScrollDirection();
 
   const navHeight = ref.current?.clientHeight ?? 0;
 
-  const hasScrolledPastNav = lastScrollY > navHeight;
+  const hasScrolledPastNav = scrollY > navHeight;
 
   const isNavSticky = isEnabled && (
     hasScrolledPastNav ||
@@ -21,13 +22,20 @@ export default function useStickyNav(
     scrollDirection === 'down';
 
   const shouldAnimateStickyNav =
-    isNavSticky &&
+    isNavSticky && (
-    lastScrollY > navHeight * 2 ||
+      scrollY > navHeight * 2 ||
-    scrollDirection === 'up';
+      scrollDirection === 'up'
+    );
 
-  return {
+  const classNames = useMemo(() => ({
-    isNavSticky,
+    classNameStickyContainer: clsx(
-    shouldHideStickyNav,
+      isNavSticky && 'sticky top-0 z-10 pointer-events-none',
-    shouldAnimateStickyNav,
+    ),
-  };
+    classNameStickyNav: clsx(
+      shouldHideStickyNav ? 'translate-y-[-100%]' : 'translate-y-0',
+      shouldAnimateStickyNav && 'transition-transform duration-200',
+    ),
+  }), [isNavSticky, shouldAnimateStickyNav, shouldHideStickyNav]);
+
+  return classNames;
 };

src/utility/useScrollDirection.ts

@@ -1,26 +1,28 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 
 export default function useScrollDirection() {
-  const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('down');
+  const [scrollInfo, setScrollInfo] = useState({
-
+    scrollDirection: 'down' as 'up' | 'down',
-  const lastScrollY = useRef(0);
+    scrollY: 0,
+  });
 
   useEffect(() => {
     const handleScroll = () => {
-      const pageHeight =
+      const pageHeight = (
-        document.documentElement.scrollHeight - window.innerHeight;
+        document.documentElement.scrollHeight -
-      setScrollDirection((
+        window.innerHeight
-        window.scrollY >= lastScrollY.current ||
+      );
-        lastScrollY.current > pageHeight
+      setScrollInfo(prev => ({
-      ) ? 'down' : 'up');
+        scrollDirection: (
-      lastScrollY.current = window.scrollY;
+          window.scrollY >= prev.scrollY ||
+          prev.scrollY > pageHeight
+        ) ? 'down' : 'up',
+        scrollY: window.scrollY,
+      }));
     };
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  return {
+  return scrollInfo;
-    scrollDirection,
-    lastScrollY: lastScrollY.current,
-  };
 }