const hamburger = document.querySelector("#hamburger");
    const appscmsToolbar = document.querySelector(".appscms-toolbar");
    const appscmsToolbarListItems = document.querySelectorAll(
      ".appscms-toolbar-list-item-span"
    );
    hamburger.addEventListener("click", () => {
      if (hamburger.dataset.open === "1") {
        hamburger.dataset.open = "0";
        appscmsToolbar.style.right = "-272px";
        appscmsToolbar.style.display = "none";
        hamburger.innerHTML =` <svg
        style="font-size:25px"
          stroke="currentColor"
          fill="currentColor"
          stroke-width="0"
          viewBox="0 0 512 512"
          aria-hidden="true"
          focusable="false"
          height="50px"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="none"
            stroke-linecap="round"
            stroke-miterlimit="10"
            stroke-width="48"
            d="M88 152h336M88 256h336M88 360h336"
          ></path>
        </svg>`
      } else {
        hamburger.dataset.open = "1";
        appscmsToolbar.style.right = "0px";
        appscmsToolbar.style.display = "block";
        hamburger.innerHTML = `<svg  height="50px"
        width="1em"  style="font-size:25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g clip-path="url(#clip0_429_11083)"> <path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_429_11083"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </g></svg>`
      }
    });
    Array.from(appscmsToolbarListItems).map((item) => {
      item.addEventListener("click", (e) => {
        e.preventDefault();
        var style = window.getComputedStyle(item.nextElementSibling);
        var maxHeight = style.getPropertyValue("max-height");
    
        if (maxHeight && maxHeight !== "0px") {
          // If the item is expanded, collapse it
          item.nextElementSibling.style.maxHeight = "0";
          item.nextElementSibling.style.opacity = "0";
          item.nextElementSibling.style.height = "0";
        } else {
          // If the item is collapsed, expand it
          item.nextElementSibling.style.maxHeight =
            item.nextElementSibling.scrollHeight + "px";
          item.nextElementSibling.style.opacity = "1";
          item.nextElementSibling.style.height = "auto";
        }
      });
    });