Overlay.js

"use client";

import Header from "./Header";
import SideBar from "./SideBar";
import { Suspense, useEffect, useState } from "react";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
import Loading from "./Loading";
import AcessibilityBar from "./AcessibilityBar";

/**
 * @param {Object} props
 * @param {Function} props.setFilterSubject 
 * @param {Function} props.setQuery  
 * @param {Function} props.setSelectFilter  
 * @param {string} props.selectFilter  
 * @param {Function} props.setTitlePage
 * @param {Function} props.setNewSize  
 * @returns componente que engloba header/sidebar/suspense e ThemeProvider
 */
export default function Overlay({
  children,
  filterState,
  setFilterState,
  setNewSize,
}) {
  const [openMenu, setOpenMenu] = useState(false);
  const handleOpenMenu = () => {
    setOpenMenu(!openMenu);
  };

  useEffect(() => {
    if (setNewSize != undefined) setNewSize(true);
  }, [openMenu, setNewSize]);

  return (
    <Suspense fallback={<Loading />}>
      <ThemeProvider theme={theme}>
        <main className="flex min-h-screen bg-main flex-col
                         bg-fundo
                         bg-repeat
                         bg-fixed"
        >
          <AcessibilityBar openMenu={handleOpenMenu} />
          <SideBar
            setFilterState={setFilterState}
            filterState={filterState}
            openMenu={openMenu}
          />
          <Header setFilterState={setFilterState} filterState={filterState} handleOpenMenu={handleOpenMenu} />
          <div
            className={`flex flex-col ml-0 ${
              openMenu ? "md:ml-64" : "md:ml-24"
            } mt-[165px]`}
          >
            {children}
          </div>
        </main>
      </ThemeProvider>
    </Suspense>
  );
}