push whole site to right when offcanvas open.

footer-scripts.html

<script>
  
document.addEventListener("DOMContentLoaded", () => {
  
  const offcanvasSelector = '.x-offcanvas'; /* change to your iD or class of offcanvas */

  
  const offcanvas = document.querySelector(offcanvasSelector)
  
  if (!offcanvas) {
    return;
  }
  
  /* add body class when offcanvas open */
  offcanvas.addEventListener('x_offcanvas:open', () => {
    document.body.classList.add('offcanvas_push')
  })
  
  /* remove body class when offcanvas close */
  offcanvas.addEventListener('x_offcanvas:close', () => {
    document.body.classList.remove('offcanvas_push')
  })
  
});  

</script>

CSS..

html:has(.offcanvas_push) {
overflow-x: hidden;
}

.brx-body {
transition: all 0.3s cubic-bezier(0.77,0,0.175,1);
margin: 0;
}

.offcanvas_push {
margin-left: 300px; /* amount you want the page to move from the left */
}