Floating Navbar

"use client";
import React, { useRef } from "react";
import { FloatingNav } from "@/lab/aceternity/ui/floating-navbar";
import { IconHome, IconMessage, IconUser } from "@tabler/icons-react";

export default function FloatingNavDemo() {
  const scrollRef = useRef<HTMLDivElement>(null);
  const navItems = [
    { name: "Home", link: "#", icon: <IconHome className="h-4 w-4 text-neutral-500 dark:text-white" /> },
    { name: "About", link: "#about", icon: <IconUser className="h-4 w-4 text-neutral-500 dark:text-white" /> },
    {
      name: "Contact",
      link: "#contact",
      icon: <IconMessage className="h-4 w-4 text-neutral-500 dark:text-white" />,
    },
  ];
  return (
    <div className="relative h-full w-full overflow-hidden [container-type:size]">
      <FloatingNav navItems={navItems} scrollContainer={scrollRef} className="top-[6%]" />
      <div ref={scrollRef} className="relative h-full w-full overflow-y-auto overscroll-contain">
        <div className="relative grid h-[300%] w-full grid-cols-1 border border-neutral-200 bg-white dark:border-white/[0.2] dark:bg-black">
          <p className="relative z-10 mt-[12cqh] text-center text-[clamp(1rem,5cqw,2.25rem)] font-bold text-neutral-600 dark:text-white">
            Scroll down, then back up to reveal the navbar
          </p>
          <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(0,0,0,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.1)_1px,transparent_1px)] bg-[size:40px_40px] dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_1px)]" />
        </div>
      </div>
    </div>
  );
}