var isInMobile = false;

// Создаём экземпляр ResizeObserver с функцией-колбэком
const jsinjectObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const rect = entry.contentRect; // Размеры контентной области
    console.log('Новые размеры:', rect.width, 'x', rect.height);

    if (isInMobile) {
        // Здесь можно выполнять любые действия при изменении размера
        entry.target.style.borderColor = `hsl(${rect.width % 360}, 50%, 50%)`;
    }
  }
});

// Начинаем наблюдение за конкретным элементом
const jsSideNav = document.querySelector('.side-nav');
jsinjectObserver.observe(jsSideNav);


function jsinject_init() {
    let navy = document.getElementById('side-nav');
    if (visualViewport.width < visualViewport.height) {
        document.body.style.width = '100%';
        navy.style.width = '6px';
        navy.onclick = (function () {
            if (navy.clientWidth > 6) {
                navy.style.width = 6;
            }
            else {
                navy.style.width = document.body.clientWidth + 'px';
            }
        });
        isInMobile = true;
    }
    else {
        document.body.style.width = '80%';
        document.body.style.margin = 'auto';
        navy.style.left = document.body.clientLeft + 'px';
    }
}