UI scripts or client Script or links ?

[ZeroCool]

Hello,

I have a widget that when I click on a button adds a css class: sidebar to a div.

<div class="sidebar">

it works very well.

Then where I'm struggling, is that I want to set up js listeners that when they detect the addition of this class in the page, adds a margin to the header, and footer

I tried to put these listeners in the widget directly with JS directly in links, I tried to put my js in a UI Script ... but it does not work, it is as if it does not detect this class for so well added via the button of my widget

// Vérifier si la classe "sidebar" est présente et ajouter la classe "has-sidebar" au corps si oui
function checkSidebar() {
  var sidebarElements = document.querySelectorAll('.sidebar');
  if (sidebarElements.length > 0 && sidebarElements[0].parentElement === document.body) {
    document.body.classList.add('has-sidebar');
    // Ajouter la marge au footer
    var footerElement = document.querySelector('footer');
    if (footerElement) {
      footerElement.style.marginLeft = '320px';
    }
  } else {
    document.body.classList.remove('has-sidebar');
    // Retirer la marge au footer
    var footerElement = document.querySelector('footer');
    if (footerElement) {
      footerElement.style.marginLeft = '';
    }
  }
}

// Vérifier la classe "sidebar" toutes les 1000 millisecondes (1 seconde)
setInterval(checkSidebar, 1000);

or just try 

function checkSidebar() {
  var sidebarElements = document.querySelectorAll('.sidebar');
  if (sidebarElements.length > 0 && sidebarElements[0].parentElement === document.body) {
    alert('Class "sidebar" Helloworld!');
  } 
}

setInterval(checkSidebar, 1000);

I also tried to do this in pure css and put the css in the page and not in the widget, for that I used the pseudo element :has(). which work very well when I inspect the code with Ctrl F12

body:has(.sidebar) footer, header:has(.sidebar), body:has(.sidebar) .leftbar {
margin-left: 320px!important;
}
body:has(.sidebar) section page {
margin-left: calc(320px + 4.8rem)!important;
}

... in short I can't do it and I ask for your help

thanks, any help will be very useful

[ZeroCool]

someone for help me ?