Function BlogAppbar

apps/web/components/BlogAppbar.tsx:22–293

({
  track,
  problemIndex,
}: {
  problem: Problem & { notionRecordMap: any };
  track: Track & { problems: Problem[] };
  problemIndex: number;
})

import CustomPagination from "./CustomPagination";

export const BlogAppbar = ({
  track,
  problemIndex,
}: {
  problem: Problem & { notionRecordMap: any };
  track: Track & { problems: Problem[] };
  problemIndex: number;
}) => {
  const router = useRouter();
  const session = useSession();
  const user = session.data?.user;

  const [isLegacyMode, setIsLegacyMode] = useRecoilState(isLegacyViewMode);

  const { trackIds }: { trackIds?: string[] } = useParams();
  const currentTrack = trackIds ? trackIds.join("/") : "";

  const [isOpen, setIsOpen] = useState<boolean>(() => {
    const storedPreference = localStorage.getItem("modeToggleIsOpen");
    return storedPreference === "true" || false;
  });
  const [visible, setVisible] = useState(true);
  const [lastScrollY, setLastScrollY] = useState(0);
  const [scrollingDown, setScrollingDown] = useState(false);
  const [prevScrollPos, setPrevScrollPos] = useState(0);

  const toggleViewMode = () => {
    const newViewMode = !isLegacyMode ? "legacy" : "new";
    setIsLegacyMode(!isLegacyMode);
    localStorage.setItem("viewMode", newViewMode);
  };

  const debounce = (func: any, delay: any) => {
    let timeoutId: any;
    return (...args: any) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        func(...args);
      }, delay);
    };
  };

  const debouncedHandleScroll = debounce(() => {
    const currentScrollPos = window.scrollY;
    setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 50);
    setScrollingDown(prevScrollPos < currentScrollPos);
    setPrevScrollPos(currentScrollPos);
  }, 90);

  const handleScroll = () => {
    if (typeof window !== "undefined") {
      const currentScrollY = window.scrollY;
      if (currentScrollY > lastScrollY && currentScrollY > 100) {
        // Scrolling down
        setVisible(false);
        setIsOpen(false);
      } else {
        // Scrolling up