document.addEventListener("DOMContentLoaded", () => {
    var addressName = document.querySelector(".address-name").textContent;
    var addressDetail = document.querySelector(".address-details").textContent;
    const sidebarLocation = document.querySelector(".sidebar-current-location");

    // sidebar location
    sidebarLocation.innerHTML += `
    <div class="flex-between">
                  <div>
                    <div class="sidebar-location-alias flex-sm">
                      <img src="../assets/geo-tag.svg" alt="geo tag icon" />
                      <p class="sidebar-address-name text-normal">
                        ${addressName}
                      </p>
                    </div>
                    <p class="sidebar-address-details text-sl-light">
                        ${addressDetail}
                    </p>
                  </div>
                  <div>
                    <img
                      src="../assets/bottom-arrow.svg"
                      alt="bottom arrow icon"
                    />
                  </div>
                </div>
                <a href="../pages/address.html" class="sidebar-address-link text-accent">Add more locations</a>
        `

})