[bug] Preline sidebar overlay blocks interaction when resizing from mobile widths

[parasj]

The Preline sidebar has a bug where if you open it at the mobile width and then resize to desktop widths, the overlay will remain open. This can be replicated on the Preline documentation website. Neither clicking on the overlay nor ESC will dismiss it.

https://github.com/htmlstreamofficial/preline/assets/453850/6b16517b-2353-4302-8749-94c485c45c30

I attempted a hotfix for this issue by monitoring for the resize event and then manually triggering a close. However, it appears that HSOverlay.close does not dismiss it once the window has been resized to desktop widths. For now, we are deleting the backdrop at desktop widths.

"use client";

import { debounce } from "lodash";
import { useEffect } from "react";

export default function CloseSidebarOnResize() {
  // This component fixes a bug where the sidebar remains open when resizing from mobile to desktop and back.
  // tracking issue in Preline repo (https://github.com/htmlstreamofficial/preline/issues/136)
  useEffect(() => {
    const handleResize = debounce(async () => {
      // if width > 1024, delete the div with the data-hs-overlay-backdrop-template attribute
      if (window.innerWidth >= 1024) {
        const backdropDiv = document.querySelector('div[data-hs-overlay-backdrop-template]');
        backdropDiv?.remove();
      }
      (window as any).HSOverlay.close(document.getElementById('application-sidebar'));
    }, 100);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <></>;
}