From 922b152dd9adc927e19d34a79f26707ba84c30d0 Mon Sep 17 00:00:00 2001
From: William Tran <william.tran1@uwaterloo.ca>
Date: Mon, 13 Sep 2021 20:27:32 -0400
Subject: [PATCH] Revert "Make organized content burger always visible"

This reverts commit 0dca9faeba8084897f93e7e986f55446efeeb34e.
---
 components/OrganizedContent.module.css |  6 +++
 components/OrganizedContent.tsx        | 68 +++++++++++++++++++++++++-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css
index c5107ad9..00113c82 100644
--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@@ -146,9 +146,15 @@
     z-index: 9;
     background: var(--primary-accent-light);
     border-radius: calc(5rem / 16);
+    transition: transform 0.3s ease-in-out;
+    transform: translateY(calc(94rem / 16));
     padding: calc(11rem / 16) calc(9rem / 16);
   }
 
+  .burgerVisible {
+    transform: translateY(0);
+  }
+
   .burger > svg {
     width: 100%;
     height: 100%;
diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx
index d9385c50..a119b972 100644
--- a/components/OrganizedContent.tsx
+++ b/components/OrganizedContent.tsx
@@ -5,6 +5,7 @@ import React, {
   useState,
   useRef,
   useEffect,
+  useCallback,
 } from "react";
 
 import styles from "./OrganizedContent.module.css";
@@ -48,6 +49,8 @@ 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);
 
   useEffect(() => {
     mobileNavOpen
@@ -96,7 +99,9 @@ export function OrganizedContent({
         )}
       </div>
       <button
-        className={styles.burger}
+        className={`${styles.burger} ${
+          burgerVisible ? styles.burgerVisible : ""
+        }`}
         onClick={() => setMobileNavOpen(!mobileNavOpen)}
       >
         <Burger />
@@ -208,6 +213,20 @@ 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;
@@ -293,6 +312,53 @@ function Arrow({ direction }: { direction: "left" | "right" }) {
   );
 }
 
+function useOnScreen(element: HTMLDivElement | null) {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) =>
+      setIntersecting(entry.isIntersecting)
+    );
+
+    if (element) {
+      observer.observe(element);
+    }
+    // Remove the observer as soon as the component is unmounted
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
+
+  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 (