MenuIcon.tsx

function MenuIcon() {
  return (
    <svg
      overflow="visible"
      preserveAspectRatio="none"
      className="h-6 w-6 origin-center"
      viewBox="0 0 4 4"
      stroke="currentColor"
      strokeWidth="2"
    >
      <line
        strokeLinecap="round"
        strokeLinejoin="round"
        x1="0.75"
        x2="3.25"
        y1="1.125"
        y2="1.125"
        strokeWidth="2"
        vectorEffect="non-scaling-stroke"
        className={cx(
          "block origin-center transition-[opacity,transform] duration-200 ease-in-out",
          "group-data-[state=closed]:translate-x-0 group-data-[state=closed]:translate-y-0 group-data-[state=closed]:rotate-0",
          "group-data-[state=open]:-translate-x-[0.625px] group-data-[state=open]:translate-y-[0.625px] group-data-[state=open]:rotate-45",
        )}
      />
      <line
        strokeLinecap="round"
        strokeLinejoin="round"
        x1="0.75"
        x2="3.25"
        y1="2"
        y2="2"
        strokeWidth="2"
        vectorEffect="non-scaling-stroke"
        className={cx(
          "block origin-center transition-[opacity,transform] duration-200 ease-in-out",
          "group-data-[state=closed]:translate-x-0 group-data-[state=closed]:opacity-100",
          "group-data-[state=open]:-translate-x-[4px] group-data-[state=open]:opacity-0",
        )}
      />
      <line
        strokeLinecap="round"
        strokeLinejoin="round"
        x1="0.75"
        x2="3.25"
        y1="2.875"
        y2="2.875"
        strokeWidth="2"
        vectorEffect="non-scaling-stroke"
        className={cx(
          "block origin-center transition-[opacity,transform] duration-200 ease-in-out",
          "group-data-[state=closed]:translate-x-0 group-data-[state=closed]:translate-y-0 group-data-[state=closed]:rotate-0",
          "group-data-[state=open]:-translate-x-[0.625px] group-data-[state=open]:-translate-y-[0.625px] group-data-[state=open]:-rotate-45",
        )}
      />
    </svg>
  );
}