|
|
|
@ -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 ( |
|
|
|
|