JavaScript navigation/sub-navigation multi-level attempt issue

Question

I'm unsure of the 'correct' name for what I'm trying to build but I can't find much online at all. If someone knows the correct name for this, would be super grateful.

I'm attempting to build a multi-level hierarchical navigation similar to this dribble here: https://cdn.dribbble.com/users/1682812/screenshots/7169393/media/305ca89834cd26cb771ded47b8670c0d.mp4

Right now from my menu checklist I've got most working however the back button, I'm really stuck as I've kinda set the initial trigger as the closing trigger too but I want that trigger to disappear once clicked and then the back button is the only thing to take you back.

• Unlimited nesting :) - working
• Don't use any data-menu-id or id="menu-1" etc.
• Multiple menus per page :) - working until back button comes into play
• Back button to previous menu level :( - not working

Also please let me know what you think of code quality/what i'm doing wrong, what could be done better. Tryna improve my skills.

Thanks :)

A site with similar functionality of what i'm after. Primary nav -> click on submenu item -> primary nav hidden, back button and submenu appears Themeforest Theme

const menus = document.querySelectorAll(".menu");
const backBtn = document.querySelector("#back");

menus.forEach((menu, index) => {
  const children = menu.querySelectorAll(".has-children");
  children.forEach((child, index) => {
    //find triggers
    let trigger = children[index].firstElementChild;

    trigger.addEventListener("click", (e) => {
      let myParent = trigger.closest(".has-children");
      let thisParent = myParent.parentNode.closest("li.has-children");
      backBtn.classList.add("active");
      if (thisParent) {
        thisParent.classList.toggle("nested");
        myParent.classList.toggle("active");
      } else {
        menu.classList.toggle("active");
        myParent.classList.toggle("active");
      }
    });

    backBtn.addEventListener("click", (e) => {
      let myParent = trigger.closest(".has-children");
      let thisParent = myParent.parentNode.closest("li.has-children");
      backBtn.classList.remove("active");
      if (thisParent) {
        thisParent.classList.toggle("nested");
        myParent.classList.toggle("active");
      } else {
        menu.classList.toggle("active");
        myParent.classList.toggle("active");
      }
    });
  });
});

#back {
  display: none;
}

#back.active {
  display: block;
}

.menu.active > li:not(.active),
.menu.active li.has-children:not(.active) li,
.has-children ul,
.nested.active > a,
.nested.active > ul > li:not(.has-children) {
  position: absolute;
  left: -100vw;
}

.has-children.active > ul {
  position: relative;
  left: 0;
}

<nav>
  <button id="back">Back (not working right yet)</button>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="has-children">
      <a href="#">Services +/-</a>
      <ul class="has-children">
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li class="has-children">
          <a href="#">More Services +/-</a>
          <ul class="has-children">
            <li><a href="#">Service 3</a></li>
            <li><a href="#">Service 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>