if (typeof window === "undefined" || !window.document) {
  return;
}
if (!document.body) return 0;

const [menuOpen, setMenuOpen] = useState(window.innerWidth > 800);
const [isMobile, setIsMobile] = useState(window.innerWidth < 800);

useEffect(() => {
  const handleResize = () => {
    if (window.innerWidth < 800) {
      setIsMobile(true);
      setMenuOpen(!menuOpen);
    } else {
      setIsMobile(false);
      setMenuOpen(menuOpen);
    }
  };

  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
  };
}, []);

const toggleMenu = () => {
  setMenuOpen(!menuOpen);
};

return (
  <>
    <div>
    {isMobile ? (
    <>
      {menuOpen && (
        <>
          <Sidebar sidebar="sidebar-md" />
          <div className="sidebar-overlay" onClick={toggleMenu}></div>
        </>
      )}
        </>
      ) : (
        <>{menuOpen && <Sidebar sidebar="sidebar-lg" />}</>
      );
    }
    </div>
  </>
);