"use client"; import React, { useRef, useEffect } from "react"; import Link from "next/link"; import HomeIcon from "../ui/home-icon"; import MagnifierIcon from "../ui/magnifier-icon"; import FilledBellIcon from "../ui/filled-bell-icon"; import MailFilledIcon from "../ui/mail-filled-icon"; import TwitterXIcon from "../ui/twitter-x-icon"; import UnorderedListIcon from "../ui/unordered-list-icon"; import BookmarkIcon from "../ui/bookmark-icon"; import UserCheckIcon from "../ui/user-check-icon"; import UsersIcon from "../ui/users-icon"; import DotsHorizontalIcon from "../ui/dots-horizontal-icon"; import type { AnimatedIconHandle, AnimatedIconProps } from "../ui/types"; const sidebarItems = [ { icon: HomeIcon, label: "Home", href: "#" }, { icon: MagnifierIcon, label: "Explore", href: "#" }, { icon: FilledBellIcon, label: "Notifications", href: "#" }, { icon: MailFilledIcon, label: "Chat", href: "#" }, { icon: TwitterXIcon, label: "Premium", href: "#" }, { icon: UnorderedListIcon, label: "Lists", href: "#" }, { icon: BookmarkIcon, label: "Bookmarks", href: "#" }, { icon: UsersIcon, label: "Communities", href: "#" }, { icon: UserCheckIcon, label: "Profile", href: "#" }, { icon: DotsHorizontalIcon, label: "More", href: "#" }, ]; interface SidebarItemProps { icon: React.ComponentType< AnimatedIconProps & React.RefAttributes >; label: string; href: string; isAnimated?: boolean; } const SidebarItem = ({ icon: Icon, label, href, isAnimated = true, }: SidebarItemProps) => { const ref = useRef(null); const handleMouseEnter = () => { if (isAnimated) { ref.current?.startAnimation(); } }; const handleMouseLeave = () => { if (isAnimated) { ref.current?.stopAnimation(); } }; useEffect(() => { if (!isAnimated) { ref.current?.stopAnimation(); } }, [isAnimated]); return ( {label} ); }; interface XSidebarProps { isAnimated?: boolean; } const XSidebar = ({ isAnimated = true }: XSidebarProps) => { return (

); }; export default XSidebar;

X Sidebar

Platform

Category