SideMenuSection.tsx

import { AnimatePresence, motion } from "framer-motion";
import React, { useCallback, useState } from "react";
import { ToggleArrowIcon } from "~/assets/icons/ToggleArrowIcon";

type Props = {
  title: string;
  initialCollapsed?: boolean;
  onCollapseToggle?: (isCollapsed: boolean) => void;
  children: React.ReactNode;
  /** When true, hides the section header and shows only children */
  isSideMenuCollapsed?: boolean;
  itemSpacingClassName?: string;
};

/** A collapsible section for the side menu
 * The collapsed state is passed in as a prop, and there's a callback when it's toggled so we can save the state.
 */
export function SideMenuSection({
  title,
  initialCollapsed = false,
  onCollapseToggle,
  children,
  isSideMenuCollapsed = false,
  itemSpacingClassName = "space-y-px",
}: Props) {
  const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);

  const handleToggle = useCallback(() => {
    const newIsCollapsed = !isCollapsed;
    setIsCollapsed(newIsCollapsed);
    onCollapseToggle?.(newIsCollapsed);
  }, [isCollapsed, onCollapseToggle]);

  return (
    <div className="w-full overflow-hidden">
      {/* Header container - stays in DOM to preserve height */}
      <div className="relative w-full">
        {/* Header - fades out when sidebar is collapsed */}
        <motion.div
          className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-hover hover:text-text-bright"
          onClick={isSideMenuCollapsed ? undefined : handleToggle}
          style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
          initial={false}
          animate={{
            opacity: isSideMenuCollapsed ? 0 : 1,
          }}
          transition={{ duration: 0.15, ease: "easeOut" }}
        >
          <h2 className="text-xs whitespace-nowrap">{title}</h2>
          <motion.div
            initial={isCollapsed}
            animate={{ rotate: isCollapsed ? -90 : 0 }}
            transition={{ duration: 0.2 }}
          >
            <ToggleArrowIcon className="size-2" />
          </motion.div>
        </motion.div>
        {/* Divider - absolutely positioned, visible when sidebar is collapsed but section is expanded */}
        <motion.div
          className="absolute left-2 right-2 top-1 h-px bg-charcoal-600"
          initial={false}
          animate={{
            opacity: isSideMenuCollapsed && !isCollapsed ? 1 : 0,
          }}
          transition={{ duration: 0.15, ease: "easeOut" }}
        />
      </div>
      <AnimatePresence initial={false}>
        <motion.div
          className="w-full"
          initial={isCollapsed ? "collapsed" : "expanded"}
          animate={isCollapsed ? "collapsed" : "expanded"}
          exit="collapsed"
          variants={{
            expanded: {
              height: "auto",
              transition: {
                height: { duration: 0.3, ease: "easeInOut" },
              },
            },
            collapsed: {
              height: 0,
              transition: {
                height: { duration: 0.2, ease: "easeInOut" },
              },
            },
          }}
          style={{ overflow: "hidden" }}
        >
          <motion.div
            className={`w-full ${itemSpacingClassName}`}
            variants={{
              expanded: {
                translateY: 0,
                opacity: 1,
                transition: { duration: 0.3, ease: "easeInOut" },
              },
              collapsed: {
                translateY: "-100%",
                opacity: 0,
                transition: { duration: 0.2, ease: "easeInOut" },
              },
            }}
          >
            {children}
          </motion.div>
        </motion.div>
      </AnimatePresence>
    </div>
  );
}