"use client"; import { useState, useEffect } from "react"; import Link from "next/link"; import { motion, useAnimate, stagger } from "framer-motion"; import { LayoutGridIcon, TrashIcon, Building2, UserCircleIcon, Settings, ChevronRight, Bell, } from "lucide-react"; import { cn } from "@/lib/utils"; const useMenuAnimation = (isOpen) => { const [scope, animate] = useAnimate(); const staggerMenuItems = stagger(0.1, { startDelay: 0.15 }); useEffect(() => { const menuAnimations = [ ["#menu-icon", { rotate: isOpen ? 180 : 0 }, { duration: 0.2 }], [ "ul", { clipPath: isOpen ? "inset(0% 0% 0% 0% round 12px)" : "inset(10% 50% 90% 50% round 12px)", }, { type: "spring", bounce: 0, duration: 0.5, }, ], [ "li", isOpen ? { opacity: 1, scale: 1, filter: "blur(0px)" } : { opacity: 0, scale: 0.3, filter: "blur(20px)" }, { duration: 0.2, delay: isOpen ? staggerMenuItems : 0, }, ], ]; menuAnimations.forEach((animation) => animate(...animation)); }, [isOpen, animate, staggerMenuItems]); return scope; }; const MenuItem = ({ icon, name, customStyle }) => ( <li> <Link href="" className={cn( "group flex items-center gap-2 p-2 rounded-md border border-transparent text-neutral-400 hover:text-neutral-300 focus-visible:text-neutral-300 focus-visible:border-neutral-800 focus-visible:outline-none transition-all duration-200", customStyle )} > {icon} <span className="flex items-center gap-1 text-sm font-medium"> {name} <ChevronRight size={12} className="transform transition-all duration-200 -translate-x-1 scale-0 opacity-0 group-hover:opacity-100 group-hover:scale-100 group-hover:translate-x-0" /> </span> </Link> </li> ); export default function DropdownMenu({ containerClassName, itemClassName }) { const [isOpen, setIsOpen] = useState(false); const scope = useMenuAnimation(isOpen); const items = [ { icon: <UserCircleIcon size={16} />, name: "Profile" }, { icon: <LayoutGridIcon size={16} />, name: "Your applications" }, { icon: <Building2 size={16} />, name: "Teams" }, { icon: <Bell size={16} />, name: "Notifications" }, { icon: <TrashIcon size={16} />, name: "Remove account", customStyle: "text-red-500 hover:bg-red-500/10 focus-visible:text-red-500 focus-visible:bg-red-500/10 focus-visible:border-red-500/10", }, ]; return ( <nav className={cn( "max-w-[200px] w-full mx-auto space-y-2", containerClassName )} ref={scope} > <motion.button whileTap={{ scale: 0.97 }} className="bg-neutral-900 border border-neutral-800 max-w-[300px] w-full flex items-center justify-between p-2.5 rounded-xl hover:bg-neutral-800 transition-colors duration-200" onClick={()=> setIsOpen((prev)=> !prev)} > <span className="text-sm font-medium text-neutral-300">Settings</span> <div style={{ transformOrigin: "50% 55%" }}> <Settings size={14} className="text-neutral-400" id="menu-icon" /> </div> </motion.button> <motion.ul className={cn( "absolute z-[1] max-w-[200px] w-full space-y-1 p-2 bg-neutral-900 border border-neutral-800 rounded-xl shadow-lg", isOpen ? "pointer-events-auto" : "pointer-events-none" )} initial={{ clipPath: "inset(10% 50% 90% 50% round 12px)" }} animate={{ clipPath: isOpen ? "inset(0% 0% 0% 0% round 12px)" : "inset(10% 50% 90% 50% round 12px)", }} transition={{ type: "spring", bounce: 0, duration: 0.5 }} > {items.map((item) => ( <MenuItem key={item.name} {...item} /> ))} </motion.ul> </nav> ); }

Installation