components/OrganizedContent.tsx

@@ -5,7 +5,6 @@ import React, {
   useState,
   useRef,
   useEffect,
-  useCallback,
 } from "react";
 
 import styles from "./OrganizedContent.module.css";
@@ -49,8 +48,7 @@ export function OrganizedContent({
   const section = sections[currentIndex];
   const isReadAll = section.id === READ_ALL_ID;
   const ref = useRef<HTMLDivElement>(null);
-  const isVisible = useOnScreen(ref.current);
-  const burgerVisible = useBurger(isVisible);
+  const burgerVisible = useOnScreen(ref.current);
 
   useEffect(() => {
     mobileNavOpen
@@ -213,20 +211,6 @@ function Footer({ sections, currentIndex, link: Link }: FooterProps) {
   );
 }
 
-function useDebounce(func: () => void, delay = 300) {
-  const timerRef = useRef<number | undefined>(undefined);
-  return useCallback(() => {
-    if (timerRef.current != null) {
-      return;
-    }
-
-    timerRef.current = window.setTimeout(() => {
-      func();
-      timerRef.current = undefined;
-    }, delay);
-  }, [func, delay]);
-}
-
 export interface SectionWithContent {
   section: Section;
   Content: ComponentType;
@@ -332,33 +316,6 @@ function useOnScreen(element: HTMLDivElement | null) {
   return isIntersecting;
 }
 
-function useBurger(componentIsVisible: boolean): boolean {
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [burgerVisible, setBurgerVisible] = useState(true);
-
-  const handleScroll = useDebounce(() => {
-    // find current scroll position
-    const currentScrollPos = window.pageYOffset;
-    setBurgerVisible(
-      componentIsVisible &&
-        ((prevScrollPos > currentScrollPos &&
-          prevScrollPos - currentScrollPos > 70) ||
-          currentScrollPos < 10)
-    );
-
-    // set state to new scroll position
-    setPrevScrollPos(currentScrollPos);
-  });
-
-  useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
-
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [handleScroll]);
-
-  return burgerVisible;
-}
-
 // Inlining this svg because we want to fill in colors using css variables
 function Burger() {
   return (