Skip to content
Snippets Groups Projects
Select Git revision
  • issue/271.3-update-routes-new-backend protected
  • issue/447-search-results-screen
  • develop default protected
3 results

Overlay.js

Blame
  • 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>
      );
    }