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