Select Git revision
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>
);
}