| import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from "react"; |
| import { NavLink, useLocation } from "react-router-dom"; |
| import type { PropsWithChildren, ReactNode } from "react"; |
|
|
| const links = [ |
| { |
| to: "/processos", |
| label: "Processos", |
| matches: (pathname: string) => |
| pathname === "/processos" || |
| pathname === "/backlog" || |
| pathname.startsWith("/trabalho/"), |
| }, |
| { to: "/dashboard", label: "Fluxo de Processos", matches: (pathname: string) => pathname === "/dashboard" }, |
| { |
| to: "/inscricoes", |
| label: "Inscrições", |
| matches: (pathname: string) => pathname === "/inscricoes" || pathname.startsWith("/inscricoes/"), |
| }, |
| { to: "/visao-gs", label: "Visão GS", matches: (pathname: string) => pathname === "/visao-gs" }, |
| { |
| to: "/cronogramas", |
| label: "Cronogramas", |
| matches: (pathname: string) => |
| pathname === "/cronogramas" || |
| pathname === "/equipe" || |
| pathname === "/metas" || |
| pathname.startsWith("/avaliadores/"), |
| }, |
| { to: "/novo", label: "Novo processo", matches: (pathname: string) => pathname === "/novo" }, |
| ]; |
|
|
| const PageHeaderActionContext = createContext<((action: ReactNode | null) => void) | null>(null); |
|
|
| export function usePageHeaderAction(action: ReactNode | null) { |
| const setAction = useContext(PageHeaderActionContext); |
|
|
| useLayoutEffect(() => { |
| if (!setAction) return; |
| setAction(action); |
| return () => setAction(null); |
| }, [action, setAction]); |
| } |
|
|
| export function Layout({ children }: PropsWithChildren) { |
| const location = useLocation(); |
| const [headerAction, setHeaderAction] = useState<ReactNode | null>(null); |
| const [headerCollapsed, setHeaderCollapsed] = useState(false); |
|
|
| function pageTitle() { |
| const { pathname } = location; |
| if (pathname === "/processos" || pathname === "/backlog") return "Processos"; |
| if (pathname === "/dashboard") return "Fluxo de Processos"; |
| if (pathname === "/inscricoes") return "Inscrições"; |
| if (pathname === "/visao-gs") return "Visão GS"; |
| if (pathname === "/cronogramas" || pathname === "/equipe" || pathname === "/metas") return "Cronogramas"; |
| if (pathname === "/novo") return "Novo processo"; |
| if (pathname.startsWith("/avaliadores/")) return "Avaliador"; |
| if (pathname.startsWith("/trabalho/") && pathname.endsWith("/editar")) return "Editar processo"; |
| if (pathname.startsWith("/trabalho/")) return "Processo"; |
| return "SIPRAC"; |
| } |
|
|
| const headerContextValue = useMemo(() => setHeaderAction, []); |
|
|
| useEffect(() => { |
| function handleScroll() { |
| const currentScrollY = window.scrollY; |
| setHeaderCollapsed(currentScrollY > 96); |
| } |
|
|
| handleScroll(); |
| window.addEventListener("scroll", handleScroll, { passive: true }); |
|
|
| return () => window.removeEventListener("scroll", handleScroll); |
| }, [location.pathname]); |
|
|
| return ( |
| <PageHeaderActionContext.Provider value={headerContextValue}> |
| <div className={`app-shell${headerCollapsed ? " app-shell-header-collapsed" : ""}`}> |
| <header className="app-header"> |
| <div className="app-header-inner"> |
| <div className="sidebar-brand"> |
| <h1>SIPRAC</h1> |
| <p className="sidebar-copy">Sistema de Processos, Acompanhamento e Cronogramas</p> |
| </div> |
| |
| <nav className="nav"> |
| {links.map((link) => ( |
| <NavLink |
| key={link.to} |
| to={link.to} |
| className={() => `nav-link${link.matches(location.pathname) ? " active" : ""}`} |
| > |
| {link.label} |
| </NavLink> |
| ))} |
| </nav> |
| </div> |
| </header> |
| |
| <main className="main-content"> |
| <header className="topbar"> |
| <h2>{pageTitle()}</h2> |
| {headerAction ? <div className="topbar-action">{headerAction}</div> : null} |
| </header> |
| {children} |
| </main> |
| </div> |
| </PageHeaderActionContext.Provider> |
| ); |
| } |
|
|
