How To Make JavaScript Styling To Update In Realtime Like CSS?

Question

Hi I'm trying to make the JavaScript Styling (Means e.g., body.style.display = 'none') code in Realtime like CSS. When we set any style in CSS for example, CSS Media Queries - It always updates the style in real time when we resize the window and etc etc So why doesn't this happen in the case of Javascript?

In my case I want to hide my custom context menu when window is resized or minimized and show it when the window is maximized. But the problem is that the user has to reload the page after the window is resized to fetch the new JavaScript styling. I have also tried setInterval to update it realtime but it returns in loop.

I haven't found any proper Information about this problem on internet so I need help of experts in this matter.

let events = ["contextmenu"];
let contextMenu = document.getElementById("context-menu");

events.forEach((eventType) => {
  document.addEventListener(
    eventType,
    (e) => {
      e.preventDefault();

      let mouseX = e.clientX || e.touches[0].clientX;
      let mouseY = e.clientY || e.touches[0].clientY;

      let menuHeight = contextMenu.getBoundingClientRect().height;
      let menuWidth = contextMenu.getBoundingClientRect().width;

      let width = window.innerWidth;
      let height = window.innerHeight;

      if (width - mouseX <= 50) {
        contextMenu.style.left = width - menuWidth + "px";
        contextMenu.style.top = mouseY + "px";

        if (height - mouseY <= 50) {
          contextMenu.style.top = mouseY - menuHeight + "px";
        }
      } else {
        contextMenu.style.left = mouseX + "px";
        contextMenu.style.top = mouseY + "px";
        //left bottom
        if (height - mouseY <= 50) {
          contextMenu.style.top = mouseY - menuHeight + "px";
        }
      }
      contextMenu.style.visibility = "visible";
    }, {
      passive: false
    }
  );
});

document.addEventListener("click", function(e) {
  if (!contextMenu.contains(e.target)) {
    contextMenu.style.visibility = "hidden";
  }
});

document.addEventListener('resize', CheckWindow());

function CheckWindow() {
  var A = screen.availWidth;
  var AA = window.outerWidth;

  var B = screen.availHeight;
  var BB = window.outerHeight;

  if (A == AA && B == BB) {
    // Maximized
  } else {
    // Resized
    document.getElementById("context-menu").style.display = "none";
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #dfe8f1;
}

ul {
  list-style: none;
}

.context-menu {
  position: fixed;
  visibility: hidden;
}

.menu {
  display: flex;
  flex-direction: column;
  background-color: #323757c7;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
  padding: 10px 0;
}

.menu>li {
  font: inherit;
  border: 0;
  padding: 10px 30px 10px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: unset;
  color: #000;
  font-weight: 500;
}

.menu>li:hover {
  background: #f1f3f7;
  color: #4b00ff;
}

.menu>li>i {
  padding-right: 10px;
}

.menu>li.trash>a:hover {
  color: red;
}

<div id="context-menu" class="context-menu">
  <ul class="menu">
    <li class="share item"><i class="fa fa-share"></i> Share</li>
    <li class="rename item"><i class="fa fa-pencil"></i> Rename</li>
    <li class="link item"><i class="fa fa-link"></i> Copy Link Address</li>
    <li class="copy item"><i class="fa fa-copy"></i> Copy to</li>
    <li class="paste item"><i class="fa fa-paste"></i> Move to</li>
    <li class="download item"><i class="fa fa-download"></i> Download</li>
    <li class="trash item"><i class="fa fa-trash"></i> Delete</li>
  </ul>
</div>