"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion } from "framer-motion"; import { Home, Search, Bell, User, Settings, Bookmark } from "lucide-react"; const FloatingNav = () => { const [active, setActive] = useState(0); const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 }); const containerRef = useRef(null); const btnRefs = useRef<(HTMLButtonElement | null)[]>([]); const items = [ { id: 0, icon: , label: "Home" }, { id: 1, icon: , label: "Search" }, { id: 2, icon: , label: "Alerts" }, { id: 3, icon: , label: "Profile" }, { id: 4, icon: , label: "Saved" }, { id: 5, icon: , label: "Profile" }, { id: 6, icon: , label: "Settings" }, ]; // Update indicator position when active changes or resize useEffect(() => { const updateIndicator = () => { if (btnRefs.current[active] && containerRef.current) { const btn = btnRefs.current[active]; const container = containerRef.current; if (!btn) return; const btnRect = btn.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); setIndicatorStyle({ width: btnRect.width, left: btnRect.left - containerRect.left, }); } }; updateIndicator(); window.addEventListener("resize", updateIndicator); return () => window.removeEventListener("resize", updateIndicator); }, [active]); return (

{items.map((item, index) => ( ))} {/* Sliding Active Indicator */}

); }; export FloatingNav;

Floating Navbar

Installation

Usage