import { Gamepad, Home, Image, Kanban, Mail, Menu, Pen, Settings, User, X } from "lucide-react"; import { ReactNode, useState } from "react"; import { AnimatePresence, motion } from "framer-motion" import { cn } from "../../lib/utils"; const DURATION = .7 type MenuItem = { name: string, icon: ReactNode } const MENU_ITEMS: MenuItem[] = [ { name: "Games", icon: , }, { name: "Messages", icon: , }, { name: "Edit", icon: , }, { name: "Personal", icon: , }, { name: "Images", icon: , }, { name: "Settings", icon: , }, { name: "Statistics", icon: , }, { name: "Home", icon: , }, ] const CircleMenu = () => { const [isOpen, setIsOpen] = useState(false) function handleClick() { setIsOpen(!isOpen) } return (

{/* make sure to change the border color to your background color here */} {isOpen ? : } {MENU_ITEMS.map((item, i) => )}

); }; //Need to pass isOpen state for exit animation const MenuItem = ({ menuItem, index, arrayLength, isOpen }: { menuItem: MenuItem, index: number, arrayLength: number, isOpen: boolean }) => { const rotationInterval = 360 / arrayLength const rotation = 360 - rotationInterval * index return ( {isOpen && {menuItem.icon} } ) } export default CircleMenu;

Menu

Circle Menu