@codeworker.br/govbr-tw-react/dist/components/Header/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState } from "react";
import { GovBRLogo } from "../GovBRLogo";
import { Button } from "../Button";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { cn, getUIDClassName } from "../../libs/utils";
import { faBars, faChevronRight, faUser, faXmark, } from "@fortawesome/free-solid-svg-icons";
import BASE_CLASSNAMES from "../../config/baseClassNames";
const Header = ({ logo = _jsx(GovBRLogo, {}), children, locator, headerTitle, login = true, loginLabel = "Entrar com gov.br", searchInput, menu = [], }) => {
    var _a, _b, _c, _d, _e, _f, _g;
    const [menuVisibility, setMenuVisibility] = useState(false);
    // Estado para rastrear item selecionado e sublink selecionado
    const [selectedMenuIndex, setSelectedMenuIndex] = useState(null);
    const [selectedSubMenuIndex, setSelectedSubMenuIndex] = useState(null);
    function handleMenuMouseLeave() {
        setSelectedMenuIndex(null);
        setSelectedSubMenuIndex(null);
    }
    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: cn("grid grid-rows-[auto_auto] w-full gap-6 py-6", BASE_CLASSNAMES.header.root), children: [_jsxs("div", { className: "flex gap-3  items-center", children: [_jsxs("div", { className: "flex gap-6 items-center", children: [_jsx("div", { className: "w-[110px]", children: logo }), _jsxs("div", { className: "grid gap-1", children: [locator && (_jsx("h1", { className: "text-sm text-govbr-gray-80 max-w-[360px]", children: locator[0] })), locator && locator[1] && (_jsx("h2", { className: "text-xs text-govbr-gray-60 max-w-[360px]", children: locator[1] }))] })] }), _jsx("div", { className: "flex-1" }), children, login && (_jsx("div", { children: _jsxs(Button, { className: "break-normal", children: [_jsx(FontAwesomeIcon, { icon: faUser }), loginLabel] }) }))] }), _jsxs("div", { className: "flex gap-6", children: [_jsxs("div", { className: "ml-[-10px] flex gap-2 items-center w-3/5", children: [_jsx(Button, { variant: "ghost", size: "icon", density: "low", onClick: () => setMenuVisibility(!menuVisibility), className: "text-2xl", children: _jsx(FontAwesomeIcon, { icon: menuVisibility ? faXmark : faBars }) }), headerTitle && (_jsx("h1", { className: "text-xl text-govbr-gray-80 p-0 m-0", children: headerTitle }))] }), _jsx("div", { className: "w-2/5", children: searchInput })] })] }), _jsx("div", { className: "relative", children: menuVisibility && (_jsxs("div", { className: "bg-govbr-gray-10 w-full min-h-auto border-t-4 border-govbr-yellow-vivid-20 absolute flex gap-0 border-b", onMouseLeave: handleMenuMouseLeave, children: [_jsx("ul", { className: "bg-transparent w-1/3 pb-6", children: menu.map(({ title, subtitle, link, subLinks, type }, index) => type ? (_jsx("li", { className: " py-6", children: _jsx("hr", { className: "border-t border-govbr-gray-20" }) })) : (_jsx("li", { children: _jsxs("a", { href: link, className: cn("flex gap-3 p-3 text-govbr-gray-60 hover:bg-govbr-blue-warm-vivid-80 hover:text-govbr-pure-0 items-center", selectedMenuIndex === index
                                        ? `!bg-govbr-blue-warm-vivid-80 !text-govbr-pure-0`
                                        : ""), onMouseEnter: () => setSelectedMenuIndex(index), children: [_jsxs("span", { className: "grid gap-1 flex-1", children: [_jsx("span", { className: "flex-1", children: title }), subtitle ? _jsx("span", { className: "flex-1 text-xs text-opacity-80", children: subtitle }) : null] }), subLinks && (_jsx("span", { children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }))] }) }, index + title))) }), selectedMenuIndex !== null &&
                            ((_a = menu[selectedMenuIndex]) === null || _a === void 0 ? void 0 : _a.subLinks) && (_jsx("ul", { className: "bg-govbr-pure-0/50 w-1/3 border-l border-govbr-gray-20", children: (_b = menu[selectedMenuIndex]) === null || _b === void 0 ? void 0 : _b.subLinks.map((subLink, index) => (_jsx("li", { children: _jsxs("a", { href: subLink.link, className: cn("flex gap-3 p-3 text-govbr-gray-60 hover:bg-govbr-blue-warm-vivid-70 hover:text-govbr-pure-0 items-center", selectedSubMenuIndex === index
                                        ? `!bg-govbr-blue-warm-vivid-70 !text-govbr-pure-0`
                                        : ""), onMouseEnter: () => setSelectedSubMenuIndex(index), children: [_jsxs("span", { className: "grid gap-1 flex-1", children: [_jsx("span", { className: "flex-1", children: subLink === null || subLink === void 0 ? void 0 : subLink.title }), subLink.subtitle ? _jsx("span", { className: "flex-1 text-xs text-opacity-80", children: subLink.subtitle }) : null] }), (subLink === null || subLink === void 0 ? void 0 : subLink.subLinks) && (_jsx("span", { children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }))] }) }, index + subLink.title))) })), selectedMenuIndex !== null &&
                            selectedSubMenuIndex !== null &&
                            ((_c = menu[selectedMenuIndex]) === null || _c === void 0 ? void 0 : _c.subLinks) &&
                            ((_e = (_d = menu[selectedMenuIndex]) === null || _d === void 0 ? void 0 : _d.subLinks[selectedSubMenuIndex]) === null || _e === void 0 ? void 0 : _e.subLinks) && (_jsx("ul", { className: "bg-govbr-pure-0/70 w-1/3 border-l border-govbr-gray-20", children: (_g = (_f = menu[selectedMenuIndex]) === null || _f === void 0 ? void 0 : _f.subLinks[selectedSubMenuIndex]) === null || _g === void 0 ? void 0 : _g.subLinks.map((subSubLink, index) => (_jsx("li", { children: _jsx("a", { href: subSubLink === null || subSubLink === void 0 ? void 0 : subSubLink.link, className: "flex gap-3 p-3 text-govbr-gray-60 hover:bg-govbr-blue-warm-vivid-60 hover:text-govbr-pure-0 items-center", children: _jsxs("span", { className: "grid gap-1 flex-1", children: [_jsx("span", { children: subSubLink === null || subSubLink === void 0 ? void 0 : subSubLink.title }), subSubLink.subtitle ? _jsx("span", { className: "flex-1 text-xs text-opacity-80", children: subSubLink.subtitle }) : null] }) }) }, index + subSubLink.title))) }))] })) })] }));
};
const HeaderPrimaryMenu = ({ children, className }) => {
    const childrenArray = React.Children.toArray(children);
    return (_jsx("ul", { className: "flex gap-3", children: childrenArray.map((child) => (_jsx("li", { className: "text-govbr-blue-warm-vivid-70 hover:text-govbr-blue-warm-vivid-80", children: child }, getUIDClassName()))) }));
};
const HeaderIconMenu = ({ children, className }) => {
    const childrenArray = React.Children.toArray(children);
    return (_jsx("ul", { className: "flex gap-0", children: childrenArray.map((child) => (_jsx("li", { children: child }, getUIDClassName()))) }));
};
Header.PrimaryMenu = HeaderPrimaryMenu;
Header.IconMenu = HeaderIconMenu;
export { Header };