"use client"; import React, { useRef, useState, useEffect } from "react"; import Link from "next/link"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; 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 UserCheckIcon from "../ui/user-check-icon"; import UnorderedListIcon from "../ui/unordered-list-icon"; import { AnimatedIconHandle, AnimatedIconProps } from "../ui/types"; const sidebarItems = [ { icon: HomeIcon, label: "Home", href: "#" }, { icon: MagnifierIcon, label: "Search", href: "#" }, { icon: FilledBellIcon, label: "Notifications", href: "#" }, { icon: MailFilledIcon, label: "Messages", href: "#" }, { icon: UnorderedListIcon, label: "Lists", href: "#" }, { icon: UserCheckIcon, label: "Profile", href: "#" }, ]; interface CollapsibleSidebarProps { className?: string; isAnimated?: boolean; } const CollapsibleSidebar = ({ className, isAnimated = true, }: CollapsibleSidebarProps) => { const [isCollapsed, setIsCollapsed] = useState(false); return (

{!isCollapsed && ( Acme Inc. Enterprise Plan )}

{!isCollapsed && ( John Doe john@acme.com )} {!isCollapsed && (

)}

); }; interface SidebarItemProps { icon: React.ForwardRefExoticComponent< AnimatedIconProps & React.RefAttributes >; label: string; href: string; isCollapsed: boolean; isAnimated: boolean; } const SidebarItem = ({ icon: Icon, label, href, isCollapsed, isAnimated, }: SidebarItemProps) => { const iconRef = useRef(null); const handleMouseEnter = () => { if (isAnimated) { iconRef.current?.startAnimation(); } }; const handleMouseLeave = () => { if (isAnimated) { iconRef.current?.stopAnimation(); } }; useEffect(() => { if (!isAnimated) { iconRef.current?.stopAnimation(); } }, [isAnimated]); const content = ( {!isCollapsed && ( {label} )} ); if (isCollapsed) { return ( {content} {label} ); } return content; }; export default CollapsibleSidebar;

Collapsible Sidebar

Platform

Category