Fix debounce and add navbar
This commit is contained in:
parent
c26452e439
commit
3d2cc1c89d
|
@ -4,6 +4,7 @@ import React, {
|
|||
useState,
|
||||
useRef,
|
||||
useEffect,
|
||||
useCallback,
|
||||
} from "react";
|
||||
import styles from "./OrganizedContent.module.css";
|
||||
|
||||
|
@ -194,27 +195,26 @@ interface BurgerProps {
|
|||
const Burger = ({ open, setOpen, componentIsVisible }: BurgerProps) => {
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [burgerVisible, setBurgerVisible] = useState(true);
|
||||
const debouncedPrevScrollPos = useDebounce<number>(prevScrollPos, 100);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const handleScroll = useDebounce(() => {
|
||||
// find current scroll position
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
// set state based on location info (explained in more detail below)
|
||||
setBurgerVisible(
|
||||
componentIsVisible &&
|
||||
((debouncedPrevScrollPos > currentScrollPos &&
|
||||
debouncedPrevScrollPos - currentScrollPos > 70) ||
|
||||
((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);
|
||||
}, [componentIsVisible, debouncedPrevScrollPos, burgerVisible]);
|
||||
}, [handleScroll]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -274,18 +274,18 @@ function useOutsideAlerter(
|
|||
}, [ref, setOpen]);
|
||||
}
|
||||
|
||||
function useDebounce<T>(value: T, delay?: number): T {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
function useDebounce(func: () => void, delay = 300) {
|
||||
const timerRef = useRef<number | undefined>(undefined);
|
||||
return useCallback(() => {
|
||||
if (timerRef.current != null) {
|
||||
return;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
};
|
||||
}, [value, delay]);
|
||||
|
||||
return debouncedValue;
|
||||
timerRef.current = window.setTimeout(() => {
|
||||
func();
|
||||
timerRef.current = undefined;
|
||||
}, delay);
|
||||
}, [func, delay]);
|
||||
}
|
||||
|
||||
function createSections(sections: Section[]) {
|
||||
|
|
|
@ -18,7 +18,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
|||
<ThemeProvider theme="light">
|
||||
<MDXProvider components={{ a: Link }}>
|
||||
<div className={styles.appContainer}>
|
||||
{/* <Navbar /> mobile OrganizedContent doesnt like non-mobile navbar*/}
|
||||
<Navbar />
|
||||
{/* Wrapping content with a div to allow for a display: block parent */}
|
||||
<div className={styles.contentContainer}>
|
||||
<Layout>
|
||||
|
|
Loading…
Reference in New Issue