www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Make burger always visible as long as oc is visible
continuous-integration/drone/push Build is passing Details

This commit is contained in:
William Tran 2021-09-13 20:39:37 -04:00
parent 922b152dd9
commit 91d841728b
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/OrganizedContent.tsx
View File

@ -49,8 +49,8 @@ export function OrganizedContent({
const section = sections[currentIndex]; const section = sections[currentIndex];
const isReadAll = section.id === READ_ALL_ID; const isReadAll = section.id === READ_ALL_ID;
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const isVisible = useOnScreen(ref.current); const burgerVisible = useOnScreen(ref.current);
const burgerVisible = useBurger(isVisible); // const burgerVisible = useBurger(isVisible);
useEffect(() => { useEffect(() => {
mobileNavOpen mobileNavOpen
@ -332,32 +332,32 @@ function useOnScreen(element: HTMLDivElement | null) {
return isIntersecting; return isIntersecting;
} }
function useBurger(componentIsVisible: boolean): boolean { // function useBurger(componentIsVisible: boolean): boolean {
const [prevScrollPos, setPrevScrollPos] = useState(0); // const [prevScrollPos, setPrevScrollPos] = useState(0);
const [burgerVisible, setBurgerVisible] = useState(true); // const [burgerVisible, setBurgerVisible] = useState(true);
const handleScroll = useDebounce(() => { // const handleScroll = useDebounce(() => {
// find current scroll position // // find current scroll position
const currentScrollPos = window.pageYOffset; // const currentScrollPos = window.pageYOffset;
setBurgerVisible( // setBurgerVisible(
componentIsVisible && // componentIsVisible &&
((prevScrollPos > currentScrollPos && // ((prevScrollPos > currentScrollPos &&
prevScrollPos - currentScrollPos > 70) || // prevScrollPos - currentScrollPos > 70) ||
currentScrollPos < 10) // currentScrollPos < 10)
); // );
// set state to new scroll position // // set state to new scroll position
setPrevScrollPos(currentScrollPos); // setPrevScrollPos(currentScrollPos);
}); // });
useEffect(() => { // useEffect(() => {
window.addEventListener("scroll", handleScroll); // window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll); // return () => window.removeEventListener("scroll", handleScroll);
}, [handleScroll]); // }, [handleScroll]);
return burgerVisible; // return burgerVisible;
} // }
// Inlining this svg because we want to fill in colors using css variables // Inlining this svg because we want to fill in colors using css variables
function Burger() { function Burger() {