Fixing the resizing issue

If you close the navigation, and then resize the browser from mobile to desktop size, you'll see it transition away.

This isn't much of a problem, because outside of developers playing around with the size of the browser, there's little chance anyone will ever notice... but it's easy to prevent, so we might as well!

In the main.js file, we can add a resize observer:

const resizeObserver = new ResizeObserver(() => {});

When we're resizing, we can add a class to the body, which will remove all transitions and animations:

const resizeObserver = new ResizeObserver((entries) => {
  document.body.classList.add("resizing");
});

@utilities {
  .resizing * {
    transition: none !important;
    animation: none !important;
  }
}

And now, we need a way to remove it:

const resizeObserver = new ResizeObserver((entries) => {
  document.body.classList.add("resizing");

  requestAnimationFrame(() => {
    document.body.classList.remove("resizing");
  });
});

And then we need tell the observer that it's watching the body:

resizeObserver.observe(document.body);

The requestAnimationFrame() here works here because it's waiting for the next frame to render (the page is repainting constantly as we resize) .

Because new frames keep firing as you're resizing, it'll keep the class on there until we stop the resizing.

In this case, we're removing all animations and transitions. If you had animated elements on the page, pausing them might be better than removing the animation. As usual, it depends on the situation for what approach is best.