Animated Profile Menu

1"use client";
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { AnimatePresence, motion, type Variants } from "framer-motion";
5import type { LucideIcon } from "lucide-react";
6import { ChevronRight, LogOut, Settings, TrendingUp, User } from "lucide-react";
7import { useCallback, useId, useState } from "react";
8 
9interface MenuItem {
10  id: number;
11  icon: LucideIcon;
12  title: string;
13  description: string;
14}
15 
16const PROFILE_MENU_ITEMS: MenuItem[] = [
17  {
18    id: 1,
19    icon: User,
20    title: "Profile",
21    description: "View your details",
22  },
23  {
24    id: 2,
25    icon: TrendingUp,
26    title: "Stats",
27    description: "Track your activity",
28  },
29  {
30    id: 3,
31    icon: Settings,
32    title: "Settings",
33    description: "Manage preferences",
34  },
35  {
36    id: 4,
37    icon: LogOut,
38    title: "Logout",
39    description: "Sign out securely",
40  },
41];
42 
43const containerVariants: Variants = {
44  hidden: { opacity: 0 },
45  visible: {
46    opacity: 1,
47    transition: {
48      staggerChildren: 0.1,
49      delayChildren: 0.12,
50    },
51  },
52};
53 
54const itemVariants: Variants = {
55  hidden: {
56    opacity: 0,
57    x: -16,
58    scale: 0.94,
59  },
60  visible: {
61    opacity: 1,
62    x: 0,
63    scale: 1,
64    transition: { duration: 0.3, ease: "easeOut" },
65  },
66  exit: {
67    opacity: 0,
68    x: -16,
69    scale: 0.92,
70    transition: { duration: 0.18, ease: "easeInOut" },
71  },
72};
73 
74export function AnimatedProfileMenu() {
75  const [isOpen, setIsOpen] = useState(false);
76  const menuId = useId();
77 
78  const toggleMenu = useCallback(() => {
79    setIsOpen((previous) => !previous);
80  }, []);
81 
82  const closeMenu = useCallback(() => {
83    setIsOpen(false);
84  }, []);
85 
86  return (
87    <nav
88      className="fixed preview:absolute not-preview:bottom-6 not-preview:left-6 z-50"
89      role="navigation"
90      aria-label="Profile quick actions"
91    >
92      <AnimatePresence>
93        {isOpen && (
94          <motion.div
95            key="profile-menu"
96            variants={containerVariants}
97            initial="hidden"
98            animate="visible"
99            exit="hidden"
100            className="absolute bottom-24 left-0 space-y-3"
101            role="presentation"
102          >
103            <motion.ul
104              id={menuId}
105              role="list"
106              aria-label="Profile actions"
107              className="flex flex-col gap-3"
108            >
109              {PROFILE_MENU_ITEMS.map((item) => {
110                const Icon = item.icon;
111 
112                return (
113// … truncated