Navbar Auto Hide

1"use client";
2 
3import * as React from "react";
4 
5export interface UseNavbarAutoHideOptions {
6  enabled?: boolean;
7  threshold?: number;
8}
9 
10function useNavbarAutoHide({ enabled = true, threshold = 80 }: UseNavbarAutoHideOptions = {}) {
11  const [hidden, setHidden] = React.useState(false);
12  const lastScrollY = React.useRef(0);
13 
14  React.useEffect(() => {
15    if (!enabled) {
16      setHidden(false);
17      return;
18    }
19 
20    function handleScroll() {
21      const currentY = window.scrollY;
22      setHidden(currentY > lastScrollY.current && currentY > threshold);
23      lastScrollY.current = currentY;
24    }
25 
26    window.addEventListener("scroll", handleScroll, { passive: true });
27    return () => window.removeEventListener("scroll", handleScroll);
28  }, [enabled, threshold]);
29 
30  return hidden;
31}
32 
33export { useNavbarAutoHide };