How to automatically remove an event from my web page the device viewpoint change in JavaScript

I am trying to expand the size of an element when an event is clicked at view width of 992px and below and want it to be automatically removed when the view width is above 993px. Please guide me on How to go about it?

if (sidebarbtn_div.style.display == 'flex') {
  const changesidebarbtn = () => {
    sidebarbtn.forEach(item => {
      item.classList.remove('active')
    })
  };
  sidebarbtn.forEach(disbtn => {
    disbtn.addEventListener('click', () => {
      changesidebarbtn();
      if (disbtn.classList.contains('close_left')) {
        document.querySelector('.dis_left').classList.add('active');
        document.querySelector('#class_middle').style.width = '96vw';
        sidebar.style.display = 'none'
      } else if (disbtn.classList.contains('dis_left')) {
        document.querySelector('.close_left').classList.add('active');
        document.querySelector('#class_middle').style.width = '100%';
        sidebar.style.display = 'block'
      };
    })
  })
} else if (sidebarbtn_div.style.display == 'none') {
  document.querySelector('#class_middle').style.width = '100%';
  sidebar.style.display = 'block'
}

This is the HTML it the event button

<div class="sidebar_button d-flex d-lg-none justify-content-center align-items-center z-3">
  <span class="close_left active p-2 py-3 rounded-circle" title="Close_left">&times;</span>
  <span class="dis_left p-2 py-3 rounded-circle" title="Dis_left">&#8827;</span>
</div>