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

Header.js

Blame
  • Header.js 6.30 KiB
    "use client";
    
    import React, { useEffect, useState } from "react";
    import Image from "next/image";
    import Link from "next/link";
    import Box from "@mui/material/Box";
    import Menu from "@mui/material/Menu";
    import Button from "@mui/material/Button";
    import AppBar from "@mui/material/AppBar";
    import Toolbar from "@mui/material/Toolbar";
    import MenuItem from "@mui/material/MenuItem";
    import CloseIcon from "@mui/icons-material/Close";
    import IconButton from "@mui/material/IconButton";
    import MenuIcon from "@mui/icons-material/Menu";
    import NotificationsIcon from "@mui/icons-material/Notifications";
    import MoreIcon from "@mui/icons-material/MoreVert";
    import SearchIcon from "@mui/icons-material/Search";
    import AccountCircleIcon from "@mui/icons-material/AccountCircle";
    import PublishIcon from "@mui/icons-material/Publish";
    import FilterAltIcon from "@mui/icons-material/FilterAlt";
    import HighlightOffIcon from "@mui/icons-material/HighlightOff";
    import NotificationsActiveSharpIcon from "@mui/icons-material/NotificationsActiveSharp";
    import AccountMenu from "./MenuProfile";
    import SearchComponent from "./SearchComponent";
    import NeedLoginModal from "../recurso/[id]/components/needLoginModal";
    import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
    import { redirect, usePathname, useSearchParams } from "next/navigation";
    import { useRouter } from "next/navigation";
    import AcessibilityBar from "./AcessibilityBar";
    
    
    function DefaultContent({
      handleToggleMobileSearch,
      setNeedLoginOpen,
      handleOpenMenu,
      setFilterState,
      filterState
    }) {
      const pathname = usePathname();
      const router = useRouter();
      const loginBarrier = useLoginBarrier();
      const [loggedIn, setLoggedIn] = useState(false);
      
      useEffect(() => {
        setLoggedIn(isLoggedIn());
      }, [])
    
      const handleOpenSubmit = () => {
        if (!isLoggedIn()) {
          setNeedLoginOpen(true);
        } else {
          const params = new URLSearchParams();
          params.set("redirect", pathname);
          router.push(`/publicar`);
        }
      };
    
      return (
        <>
          <div className="flex align-middle items-center flex-shrink-0 pl-5">
            <IconButton
            className=" h-[36px] w-[36px] mx-2"
              size="large"
              edge="start"
              aria-label="open drawer"
              onClick={handleOpenMenu}
            >
              <MenuIcon className="text-4xl text-secondary" />
            </IconButton>
            <Link href="/" className="flex items-center shrink-0">
              <Image
                src="/mecred.svg"
                alt="logo"
                width={0}
                height={0}
                className="w-32"
              />
            </Link>
          </div>
          <div className="grow hidden lg:flex items-center">
            <SearchComponent setFilterState={setFilterState} filterState={filterState} />
          </div>
          <div className="flex justify-end shrink-0 items-center pr-2">
            <button
              type="button"
              alt="Abrir busca"
              title="Abrir busca"
              className="lg:hidden bg-transparent hover:bg-text-color w-10 h-10 rounded text-white shrink-0 transition"
              onClick={handleToggleMobileSearch}
            >
              <SearchIcon className="h-full text-3xl" />
            </button>
    
            <button
              type="button"
              className="group max-sm:hidden bg-main-hover hover:bg-text-color px-4 h-10 mx-5 rounded text-text-color hover:text-white flex items-center font-bold flex-shrink-0 outline outline-1 outline-outlineColor"
              onClick={handleOpenSubmit}
            >
              <Image
                className="invert-[40%] group-hover:invert-[100%] rotate-180 group-hover:-rotate-90 transition mr-1"
                src={"/download.svg"}
                width={20}
                height={20}
              />
              Publicar recurso
            </button>
    
            {loggedIn ? (
              <>
                <button
                  type="button"
                  alt="Notificações"
                  title="Notificações"
                  className="bg-transparent hover:text-secondary w-10 h-10 rounded text-text-color flex-shrink-0 transition"
                >
                  <NotificationsIcon className="h-full text-3xl" />
                </button>
                <AccountMenu />
              </>
            ) : (
              <button
                type="button"
                className="group max-sm:hidden bg-orange hover:bg-text-color px-4 h-10 mr-14 rounded text-white flex items-center font-bold flex-shrink-0"
                onClick={loginBarrier}
              >
                Entrar
              </button>
            )}
          </div>
        </>
      );
    }
    
    function MobileSearch({ setFilterState, handleToggleMobileSearch }) {
      return (
        <div className="flex w-full items-center gap-3">
          <SearchComponent setFilterState={setFilterState} filterState={filterState} />
          <button
            type="button"
            alt="Fechar busca"
            title="Fechar busca"
            className="bg-text-color hover:bg-text-color w-10 h-10 rounded text-white shrink-0 transition"
            onClick={handleToggleMobileSearch}
          >
            <CloseIcon className="h-full text-3xl" />
          </button>
        </div>
      );
    }
    
    /**
     * @param {Object} props
     * @param {Function} props.setQuery - seta o query
     * @param {Function} props.handleOpenMenu - abre/fecha sidebar
     * @returns header
     */
    export default function Header({ setFilterState, filterState, handleOpenMenu }) {
      const [needLoginOpen, setNeedLoginOpen] = useState(false);
      const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
    
    
      const handleToggleMobileSearch = () => {
        setMobileSearchOpen((curr) => !curr);
      };
    
      return (
        <div className="fixed top-10 z-10">
          <div className="h-32 flex gap-3 sm:gap-12 justify-between px-2 shadow-none w-screen" 
          style={{
              backgroundImage: 
              `linear-gradient(rgba(245, 249, 249, 0.7),
              rgba(245, 249, 249, 1)),url("/images/fundo.webp")`,
              backgroundRepeat: "repeat",
              backgroundAttachment: "fixed",
            }}>
            {mobileSearchOpen ? (
              <MobileSearch handleToggleMobileSearch={handleToggleMobileSearch} />
            ) : (
              <DefaultContent
                handleToggleMobileSearch={handleToggleMobileSearch}
                setNeedLoginOpen={setNeedLoginOpen}
                handleOpenMenu={handleOpenMenu}
                setFilterState={setFilterState}
                filterState={filterState}
              />
            )}
          </div>
          <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
        </div>
      );
    }