Select Git revision
Overlay.js 3.41 KiB
"use client";
import * as React from "react";
import Header from "./Header";
import SideBar from "./SideBar";
import { Suspense, useEffect, useLayoutEffect, useState } from "react";
import theme from "@/app/theme";
import { ThemeProvider } from "@emotion/react";
import Loading from "./Loading";
import AcessibilityBar from "./AcessibilityBar";
import NavigationBar from "./NavigationBar";
/**
* @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,
type,
}) {
const [isMobile, setIsMobile] = useState(false);
const [openMenu, setOpenMenu] = useState(false);
// Estado para controlar a exibição da pesquisa no mobile
const [searchIsClicked, setSearchIsClicked] = useState(false);
const mobileSearch = { searchIsClicked, setSearchIsClicked };
const handleOpenMenu = () => {
setOpenMenu(!openMenu);
};
useEffect(() => {
if (setNewSize != undefined) setNewSize(true);
const handleResize = () => {
setIsMobile(window.innerWidth <= 767);
};
// Atualiza o estado inicialmente e quando a janela é redimensionada
handleResize();
window.addEventListener("resize", handleResize);
// Limpa o listener quando o componente for desmontado
return () => {
window.removeEventListener("resize", handleResize);
};
}, [openMenu, setNewSize]);
return (
<Suspense fallback={<Loading />}>
<ThemeProvider theme={theme}>
<main className="bg-ice-HC-dark bg-fundo bg-repeat bg-fixed text-base min-h-dvh">
<div className="hidden md:block">
<AcessibilityBar />
</div>
<Header setFilterState={setFilterState} filterState={filterState} mobileSearch={mobileSearch} />
{isMobile ?
<div>
<div className="pt-[70px] pb-[20px]">
{children}
</div>
<NavigationBar mobileSearch={mobileSearch} />
</div>
:
// Passar o parâmetro type={twoColumns} para páginas que possuem duas colunas (ex: InfiniteScroll, Perfil)
type === "twoColumns" ?
<div className="flex w-full">
<div className="fixed pt-[160px] w-[150px] overflow-y-auto h-screen scrollbar-none">
<SideBar setFilterState={setFilterState} filterState={filterState} />
</div>
<div className=" flex-grow pt-[150px] min-w-0 h-full ml-[120px]">
{children}
</div>
</div>
:
// Páginas com três colunas e que não precisam de h-full
<div
className="grid w-full pt-[160px] h-dvh text-base 2xl:grid-cols-[150px_minmax(0,1fr)_500px] xl:grid-cols-[150px_minmax(0,1fr)_400px] grid-cols-[150px_minmax(0,1fr)]"
>
<div className="min-h-0 overflow-y-auto scrollbar-none">
<SideBar setFilterState={setFilterState} filterState={filterState} />
</div>
{children}
</div>
}
</main>
</ThemeProvider>
</Suspense>
);
}