"use client"; import React from "react"; import { motion, Variants } from "framer-motion"; import { Home, Settings, Bell, User, Mail, BarChart3, HelpCircle, LogOut, } from "lucide-react"; // --- HoverGradientNavBar Component --- interface HoverGradientMenuItem { icon: React.ReactNode; label: string; href: string; gradient: string; iconColor: string; } const menuItems: HoverGradientMenuItem[] = [ { icon: , label: "Home", href: "#", gradient: "radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%)", iconColor: "group-hover:text-blue-500 dark:group-hover:text-blue-400", }, { icon: , label: "Notifications", href: "#", gradient: "radial-gradient(circle, rgba(249,115,22,0.15) 0%, rgba(234,88,12,0.06) 50%, rgba(194,65,12,0) 100%)", iconColor: "group-hover:text-orange-500 dark:group-hover:text-orange-400", }, { icon: , label: "Messages", href: "#", gradient: "radial-gradient(circle, rgba(147,51,234,0.15) 0%, rgba(126,34,206,0.06) 50%, rgba(88,28,135,0) 100%)", iconColor: "group-hover:text-purple-500 dark:group-hover:text-purple-400", }, { icon: , label: "Analytics", href: "#", gradient: "radial-gradient(circle, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.06) 50%, rgba(21,128,61,0) 100%)", iconColor: "group-hover:text-green-500 dark:group-hover:text-green-400", }, { icon: , label: "Settings", href: "#", gradient: "radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%)", iconColor: "group-hover:text-blue-500 dark:group-hover:text-blue-400", }, { icon: , label: "Profile", href: "#", gradient: "radial-gradient(circle, rgba(239,68,68,0.15) 0%, rgba(220,38,38,0.06) 50%, rgba(185,28,28,0) 100%)", iconColor: "group-hover:text-red-500 dark:group-hover:text-red-400", }, { icon: , label: "Help", href: "#", gradient: "radial-gradient(circle, rgba(20,184,166,0.15) 0%, rgba(13,148,136,0.06) 50%, rgba(15,118,110,0) 100%)", iconColor: "group-hover:text-teal-500 dark:group-hover:text-teal-400", }, { icon: , label: "Logout", href: "#", gradient: "radial-gradient(circle, rgba(161,98,7,0.15) 0%, rgba(133,77,14,0.06) 50%, rgba(100,62,8,0) 100%)", iconColor: "group-hover:text-amber-600 dark:group-hover:text-amber-400", }, ]; // Animation variants const itemVariants: Variants = { initial: { rotateX: 0, opacity: 1 }, hover: { rotateX: -90, opacity: 0 }, }; const backVariants: Variants = { initial: { rotateX: 90, opacity: 0 }, hover: { rotateX: 0, opacity: 1 }, }; const glowVariants: Variants = { initial: { opacity: 0, scale: 0.8 }, hover: { opacity: 1, scale: 2, transition: { opacity: { duration: 0.5, ease: [0.4, 0, 0.2, 1] }, scale: { duration: 0.5, type: "spring", stiffness: 300, damping: 25 }, }, }, }; const sharedTransition = { type: "spring" as const, stiffness: 100, damping: 20, duration: 0.5, }; function HoverGradientNavBar(): React.JSX.Element { return (

{/* Per-item glow */} {/* Front-facing */} {item.icon} {item.label} {/* Back-facing */} {item.icon} {item.label}

); } export HoverGradientNavBar;

Hover Gradient Navbar

Installation

Usage