Menu Toggle

"use client";
import { useState } from "react";
import { motion } from "motion/react";
 
export default function MenuToggle({
    open,
    toggle,
}: {
    open?: boolean;
    toggle?: () => void;
}) {
    const [internalOpen, setInternalOpen] = useState(false);
 
    const isControlled = open !== undefined && typeof toggle === "function";
 
    const actualOpen = isControlled ? open : internalOpen;
    const handleToggle = isControlled
        ? toggle
        : () => setInternalOpen((prev) => !prev);
 
    return (
        <motion.button
            whileHover={{ scale: 1.04 }}
            whileTap={{ scale: 0.98 }}
            transition={{ type: "spring", stiffness: 400, damping: 17 }}
            onClick={handleToggle}
            className="cursor-pointer "
        >
            <svg width="100%" height="100%" viewBox="0 0 23 23">
                <motion.path
                    animate={actualOpen ? "open" : "closed"}
                    variants={{
                        closed: { d: "M 2 2.5 L 20 2.5" },
                        open: { d: "M 3 16.5 L 17 2.5" },
                    }}
                    strokeWidth="1.2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    stroke="currentColor"
                />
                <motion.path
                    animate={actualOpen ? "open" : "closed"}
                    d="M 2 9.423 L 20 9.423"
                    variants={{
                        closed: { opacity: 1 },
                        open: { opacity: 0 },
                    }}
                    transition={{ duration: 0.1 }}
                    strokeWidth="1.2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    stroke="currentColor"
                />
                <motion.path
                    animate={actualOpen ? "open" : "closed"}
                    variants={{
                        closed: { d: "M 2 16.346 L 20 16.346" },
                        open: { d: "M 3 2.5 L 17 16.346" },
                    }}
                    strokeWidth="1.2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    stroke="currentColor"
                />
            </svg>
        </motion.button>
    );
}