Move openlayers zoom tools on event

Question

Trying to reproduce something similar to Openlayers with sidebar where once the sidebar is expanded the .ol-zoom margin-left is modified to change its position but I can't use jquery in my project, so looks for Vanilla JS or Angular based solution.

I saw that its quiet easy to change position of the openlayers Zoom buttons as answered here but I would like to change the position on some event trigger like a (sidebar-toggle button) button click.

Thanks

Answer 1

Here is my solution

const olZoom = document.getElementsByClassName("ol-zoom");
const sideBarElements = document.getElementsByClassName("sidebar-left");
if(!this.sidebarVisibility) {
  (olZoom[0] as HTMLElement).style.marginLeft = "0px";
  (olZoom[0] as HTMLElement).style.marginTop = "60px";
} else {
  setTimeout(() => {
    (olZoom[0] as HTMLElement).style.marginLeft = ((sideBarElements[0] as HTMLElement).offsetWidth - 10) + 'px';
    (olZoom[0] as HTMLElement).style.marginTop = "0px";
  }, 50);
}

major issue what I was facing was that I wasn't casting Element to HTMLElement in typescript as explained here which was blocking me to apply my margin style