Use Toggle Onscroll

"use client";

import * as React from "react";
import { useToggleOnscroll } from "@/components/ui/use-toggle-onscroll";

export default function Default() {
  const { isHidden } = useToggleOnscroll();

  return (
    <div className="w-full">
      <nav
        className="fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-center border-b bg-background/80 font-medium backdrop-blur transition-transform duration-300 ease-in-out"
        style={{ transform: isHidden ? "translateY(-100%)" : "translateY(0%)" }}
      >
        Navbar — scroll down to hide, up to reveal
      </nav>

      <div className="mx-auto max-w-md space-y-4 px-6 pb-24 pt-24">
        {Array.from({ length: 40 }).map((_, i) => (
          <div
            key={i}
            className="rounded-lg border bg-card p-4 text-sm text-muted-foreground"
          >
            Section {i + 1}
          </div>
        ))}
      </div>
    </div>
  );
}