a small bug

[JetaimeCat]

Hello, I found that after clicking the "Show Contacts" button after the page is zoomed out, directly zooming in on the page will result in incomplete display on the right side.
I added some code in js myself, but it doesn't feel very good.

// detect page size, modify page display content
window.onresize = function () {
    function watchChangeSize() {
        let offsetWid = document.documentElement.clientWidth;
        let offsetHei = document.documentElement.clientHeight;
        return [offsetWid, offsetHei];
    }

    let size = watchChangeSize();
    if (size[0] >= 1230) {
        sidebar.classList.remove("active");
    } else {
        sidebar.classList.add("active");
    }
}

[bharat9806]

function adjustLayout() {
let sidebar = document.querySelector('.sidebar'); // Ensure this selector matches your sidebar's class or ID
let offsetWid = document.documentElement.clientWidth;

if (offsetWid >= 1230) {
    sidebar.classList.remove("active");
} else {
    sidebar.classList.add("active");
}

}

// Debounce function to limit the rate at which a function is executed
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}

// Adjust layout immediately and on resize, with debouncing
adjustLayout(); // Adjust on load
window.onresize = debounce(adjustLayout, 100); // Adjust on resize with a 100ms debounce

In order to enhance performance, this code debounces the resize event and makes an instantaneous adjustment as the page loads. Additionally, make sure your CSS is responsive, and if you can, use CSS media queries to change the layout.

[moteeullahazmi]

`window.onresize = function () {
// Get the sidebar element
let sidebar = document.getElementById("sidebar");

// Define a function to watch the window size
function watchChangeSize() {
    let offsetWid = document.documentElement.clientWidth;
    let offsetHei = document.documentElement.clientHeight;
    return [offsetWid, offsetHei];
}

// Check the window size
let size = watchChangeSize();
if (size[0] >= 1230) {
    sidebar.classList.remove("active");
} else {
    sidebar.classList.add("active");
}

}
`

I added a line to get the sidebar element using getElementById. Make sure you replace "sidebar" with the actual ID of your sidebar element.
I moved the watchChangeSize() function definition outside of the window.onresize event so that it's defined only once.
I used the classList property to add or remove the "active" class from the sidebar element based on the window size. Make sure you have a CSS class named "active" that controls the display of the sidebar.
With these changes, your code should work as expected, adjusting the display of the sidebar based on the window size. Make sure your HTML contains an element with the ID "sidebar" and that you have CSS to control its appearance based on the presence of the "active" class.