Animated Navbar

1"use client";
2 
3import { motion } from "framer-motion";
4import { useState } from "react";
5 
6const navItems = ["Home", "About", "Services", "Contact"];
7 
8export function AnimatedNavbar() {
9  const [activeIndex, setActiveIndex] = useState(0);
10 
11  return (
12    <nav className="rounded-2xl border  bg-[var(--card-bg)] p-2">
13      <ul className="flex gap-1">
14        {navItems.map((item, index) => (
15          <li key={item} className="relative">
16            <motion.button
17              onClick={() => setActiveIndex(index)}
18              className="relative z-10 px-4 py-2 text-sm font-medium transition-colors"
19              style={{
20                color: activeIndex === index ? "white" : "var(--foreground)",
21              }}
22              whileHover={{ scale: 1.05 }}
23              whileTap={{ scale: 0.95 }}
24            >
25              {item}
26            </motion.button>
27            {activeIndex === index && (
28              <motion.div
29                layoutId="navbar-indicator"
30                className="absolute inset-0 rounded-lg bg-accent"
31                transition={{
32                  type: "spring",
33                  stiffness: 380,
34                  damping: 30,
35                }}
36              />
37            )}
38          </li>
39        ))}
40      </ul>
41    </nav>
42  );
43}