I add this js and css in your custom code section, Follow this guide to add custom code: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".menu-parent").forEach(function (parent) {
    // Create a span element for the toggle
    let toggle = document.createElement("span");
    toggle.classList.add("submenu-toggle");
    toggle.textContent = "+"; // Default to collapsed

    // Insert toggle icon inside the menu parent
    parent.querySelector("a").after(toggle);

    // Toggle submenu on click
    toggle.addEventListener("click", function () {
      let submenu = parent.querySelector(".menu-child");
      if (submenu) {
        submenu.style.display = submenu.style.display === "block" ? "none" : "block";
        toggle.textContent = submenu.style.display === "block" ? "−" : "+";
      }
    });
  });
});

anfd this css:

.menu-parent {
  position: relative;
}

.submenu-toggle {
  position: absolute !important;
  right: 10px;
  cursor: pointer;
  font-size: 18px !important;
  font-weight: bold;
    z-index: 12;
}

.menu-child {
  display: none; /* Initially hidden */
}

.menu-child.show {
  display: block;
}

.offcanvas-menu .offcanvas-inner .sp-module ul>li a, .offcanvas-menu .offcanvas-inner .sp-module ul>li span {
    display: flex;
    font-size: 1rem;
    padding: 0.125rem 0;
    position: unset;
}
.offcanvas-menu .offcanvas-inner .sp-module ul>li {
    overflow: unset !important;
}