Lucas RayanandAntigravity
c1bd2c7e11
- Translate content to English across messages/en.json, data/en, lib/data/en, and public/exemplos/en - Implement localized routing, slugs, and language negotiation with fallback to en - Build dedicated search index for English with strict book exclusion - Update components and pages to dynamically render localized strings and datasets - Verify full structural parity and exact 1:1 match on Portuguese pages via comparator Co-Authored-By: Antigravity <noreply@google.com>
381 lines
15 KiB
React
381 lines
15 KiB
React
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import Link from "next/link";
|
|
import Logo from "@/components/Logo";
|
|
import SearchDialog from "@/components/SearchDialog";
|
|
import LanguageSelector from "@/components/LanguageSelector";
|
|
import { LOCALES, getLocalizedHref } from "@/i18n/links";
|
|
import { usePathname } from "next/navigation";
|
|
import { useTheme } from "next-themes";
|
|
import {
|
|
ArrowRight,
|
|
BookA,
|
|
BookOpen,
|
|
Box,
|
|
ChevronDown,
|
|
Cpu,
|
|
Library,
|
|
Menu,
|
|
Moon,
|
|
Scale,
|
|
Search,
|
|
SlidersHorizontal,
|
|
Sparkles,
|
|
Sun,
|
|
X,
|
|
AlertTriangle,
|
|
} from "lucide-react";
|
|
|
|
const MENUS_PT = [
|
|
{
|
|
id: "hardware",
|
|
label: "Hardware",
|
|
items: [
|
|
{ href: "/series", label: "Séries ESP32", desc: "12 chips, pinagem e especificações", icon: Cpu },
|
|
{ href: "/comparacao", label: "Comparador", desc: "Até quatro séries lado a lado", icon: Scale },
|
|
{ href: "/catalogo", label: "Catálogo de placas", desc: "DevKits, pinos e onde comprar", icon: Box },
|
|
],
|
|
},
|
|
{
|
|
id: "tools",
|
|
label: "Ferramentas",
|
|
items: [
|
|
{ href: "/seletor", label: "Seletor inteligente", desc: "O chip certo para o seu projeto", icon: SlidersHorizontal },
|
|
{ href: "/diagnostico", label: "Diagnóstico", desc: "Brownout, bootloop, WDT e mais", icon: AlertTriangle },
|
|
{ href: "/componentes", label: "Component Registry", desc: "Drivers e manifests idf_component.yml", icon: Search },
|
|
],
|
|
},
|
|
{
|
|
id: "library",
|
|
label: "Biblioteca",
|
|
items: [
|
|
{ href: "/frameworks", label: "Frameworks e SDKs", desc: "ESP-IDF, Arduino, Rust e Matter", icon: BookOpen },
|
|
{ href: "/glossario", label: "Glossário técnico", desc: "Os termos que aparecem nos datasheets", icon: BookA },
|
|
{ href: "/sobre", label: "Sobre o projeto", desc: "Autoria, método e abertura", icon: Sparkles },
|
|
],
|
|
},
|
|
];
|
|
|
|
const MENUS_EN = [
|
|
{
|
|
id: "hardware",
|
|
label: "Hardware",
|
|
items: [
|
|
{ href: "/series", label: "ESP32 Series", desc: "12 chips, pinouts and specifications", icon: Cpu },
|
|
{ href: "/comparacao", label: "Comparator", desc: "Up to four series side by side", icon: Scale },
|
|
{ href: "/catalogo", label: "Board Catalog", desc: "DevKits, pinouts and where to buy", icon: Box },
|
|
],
|
|
},
|
|
{
|
|
id: "tools",
|
|
label: "Tools",
|
|
items: [
|
|
{ href: "/seletor", label: "Smart Selector", desc: "The right chip for your project", icon: SlidersHorizontal },
|
|
{ href: "/diagnostico", label: "Diagnostics", desc: "Brownout, bootloop, WDT and more", icon: AlertTriangle },
|
|
{ href: "/componentes", label: "Component Registry", desc: "Drivers and idf_component.yml manifests", icon: Search },
|
|
],
|
|
},
|
|
{
|
|
id: "library",
|
|
label: "Library",
|
|
items: [
|
|
{ href: "/frameworks", label: "Frameworks & SDKs", desc: "ESP-IDF, Arduino, Rust and Matter", icon: BookOpen },
|
|
{ href: "/glossario", label: "Technical Glossary", desc: "Terms appearing in datasheets", icon: BookA },
|
|
{ href: "/sobre", label: "About the Project", desc: "Authorship, method and open source", icon: Sparkles },
|
|
],
|
|
},
|
|
];
|
|
|
|
const MOBILE_LINKS_PT = [
|
|
{ href: "/series", label: "Séries ESP32" },
|
|
{ href: "/comparacao", label: "Comparador" },
|
|
{ href: "/seletor", label: "Seletor inteligente" },
|
|
{ href: "/diagnostico", label: "Diagnóstico" },
|
|
{ href: "/frameworks", label: "Frameworks e SDKs" },
|
|
{ href: "/componentes", label: "Component Registry" },
|
|
{ href: "/glossario", label: "Glossário" },
|
|
{ href: "/catalogo", label: "Catálogo de placas" },
|
|
{ href: "/livro", label: "O livro" },
|
|
{ href: "/sobre", label: "Sobre" },
|
|
];
|
|
|
|
const MOBILE_LINKS_EN = [
|
|
{ href: "/series", label: "ESP32 Series" },
|
|
{ href: "/comparacao", label: "Comparator" },
|
|
{ href: "/seletor", label: "Smart Selector" },
|
|
{ href: "/diagnostico", label: "Diagnostics" },
|
|
{ href: "/frameworks", label: "Frameworks & SDKs" },
|
|
{ href: "/componentes", label: "Component Registry" },
|
|
{ href: "/glossario", label: "Glossary" },
|
|
{ href: "/catalogo", label: "Board Catalog" },
|
|
{ href: "/sobre", label: "About" },
|
|
];
|
|
|
|
function isActivePath(pathname, href, currentLocale) {
|
|
const localized = getLocalizedHref(`/${currentLocale}${href}`, currentLocale);
|
|
if (href === "/" || localized === `/${currentLocale}/` || localized === `/${currentLocale}`) {
|
|
return pathname === `/${currentLocale}` || pathname === `/${currentLocale}/`;
|
|
}
|
|
return pathname === localized || String(pathname).startsWith(`${localized}/`);
|
|
}
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname() || "";
|
|
const [mounted, setMounted] = useState(false);
|
|
const [openMenu, setOpenMenu] = useState(null);
|
|
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
const navRef = useRef(null);
|
|
const closeRef = useRef(null);
|
|
const menuButtonRef = useRef(null);
|
|
|
|
const currentLocale =
|
|
LOCALES.find((l) => pathname === `/${l.code}` || pathname.startsWith(`/${l.code}/`))?.code || "pt";
|
|
const isPt = currentLocale === "pt";
|
|
|
|
const getLinkHref = (href) => getLocalizedHref(`/${currentLocale}${href}`, currentLocale);
|
|
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
useEffect(() => {
|
|
setOpenMenu(null);
|
|
setDrawerOpen(false);
|
|
}, [pathname]);
|
|
|
|
useEffect(() => {
|
|
function onPointerDown(event) {
|
|
if (navRef.current && !navRef.current.contains(event.target)) setOpenMenu(null);
|
|
}
|
|
function onKeyDown(event) {
|
|
if (event.key === "Escape") {
|
|
setOpenMenu(null);
|
|
setDrawerOpen(false);
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", onPointerDown);
|
|
document.addEventListener("keydown", onKeyDown);
|
|
return () => {
|
|
document.removeEventListener("mousedown", onPointerDown);
|
|
document.removeEventListener("keydown", onKeyDown);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!drawerOpen) return;
|
|
const previous = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
closeRef.current?.focus();
|
|
return () => {
|
|
document.body.style.overflow = previous;
|
|
menuButtonRef.current?.focus();
|
|
};
|
|
}, [drawerOpen]);
|
|
|
|
const visibleMobileLinks = isPt ? MOBILE_LINKS_PT : MOBILE_LINKS_EN;
|
|
const MENUS = isPt ? MENUS_PT : MENUS_EN;
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 pt-3 sm:pt-4">
|
|
<div className="shell">
|
|
<div className="nav-pill flex h-16 items-center justify-between gap-3 rounded-full px-3 sm:px-4">
|
|
<Link href={getLinkHref("/")} className="flex min-h-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2" aria-label={isPt ? "ESPDocs, página inicial" : "ESPDocs, homepage"}>
|
|
<Logo className="h-[30px] w-[30px]" />
|
|
<span className="font-display text-[1.3rem] font-semibold leading-none tracking-[-0.045em] text-ink">ESPDocs</span>
|
|
</Link>
|
|
|
|
<nav ref={navRef} className="hidden items-center gap-0.5 lg:flex" aria-label={isPt ? "Navegação principal" : "Main navigation"}>
|
|
{MENUS.map((menu) => {
|
|
const active = menu.items.some((item) => isActivePath(pathname, item.href, currentLocale));
|
|
const expanded = openMenu === menu.id;
|
|
return (
|
|
<div key={menu.id} className="relative">
|
|
<button
|
|
type="button"
|
|
className={`nav-link ${active ? "is-active" : ""}`}
|
|
aria-expanded={expanded}
|
|
aria-controls={`menu-${menu.id}`}
|
|
onClick={() => setOpenMenu(expanded ? null : menu.id)}
|
|
>
|
|
{menu.label}
|
|
<ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${expanded ? "rotate-180" : ""}`} aria-hidden="true" />
|
|
</button>
|
|
{expanded && (
|
|
<div
|
|
id={`menu-${menu.id}`}
|
|
className="absolute left-0 top-full mt-3 w-[23rem] rounded-[1.5rem] border border-line bg-surface p-2 shadow-[0_24px_60px_-20px_rgba(15,23,42,0.35)] dark:shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)]"
|
|
>
|
|
{menu.items.map((item) => {
|
|
const Icon = item.icon;
|
|
const localizedHref = getLinkHref(item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={localizedHref}
|
|
className="group flex items-start gap-3 rounded-2xl px-3 py-3 transition-colors hover:bg-surface-2"
|
|
aria-current={isActivePath(pathname, item.href, currentLocale) ? "page" : undefined}
|
|
>
|
|
<span className="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-accent-soft text-accent transition-colors group-hover:bg-surface">
|
|
<Icon className="h-4 w-4" aria-hidden="true" />
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block text-sm font-semibold text-ink">{item.label}</span>
|
|
<span className="mt-0.5 block text-xs leading-relaxed text-muted">{item.desc}</span>
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{isPt && (
|
|
<Link href={getLinkHref("/livro")} className={`nav-link ${isActivePath(pathname, "/livro", currentLocale) ? "is-active" : ""}`} aria-current={isActivePath(pathname, "/livro", currentLocale) ? "page" : undefined}>
|
|
Livro
|
|
</Link>
|
|
)}
|
|
<Link href={getLinkHref("/sobre")} className={`nav-link ${isActivePath(pathname, "/sobre", currentLocale) ? "is-active" : ""}`} aria-current={isActivePath(pathname, "/sobre", currentLocale) ? "page" : undefined}>
|
|
{isPt ? "Sobre" : "About"}
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-1.5">
|
|
<Link href={getLinkHref("/seletor")} className="btn btn-primary btn-sm hidden lg:inline-flex">
|
|
<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
|
|
{isPt ? "Selecionar chip" : "Select chip"}
|
|
</Link>
|
|
<SearchDialog />
|
|
<LanguageSelector />
|
|
<ThemeToggle isPt={isPt} />
|
|
<button
|
|
ref={menuButtonRef}
|
|
type="button"
|
|
className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2 lg:hidden"
|
|
aria-label={isPt ? "Abrir menu de navegação" : "Open navigation menu"}
|
|
aria-expanded={drawerOpen}
|
|
onClick={() => setDrawerOpen(true)}
|
|
>
|
|
<Menu className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{mounted &&
|
|
createPortal(
|
|
<>
|
|
<div
|
|
className={`fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm transition-opacity duration-200 ${
|
|
drawerOpen ? "opacity-100" : "hidden"
|
|
}`}
|
|
onClick={() => setDrawerOpen(false)}
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={isPt ? "Menu de navegação" : "Navigation menu"}
|
|
aria-hidden={!drawerOpen}
|
|
inert={!drawerOpen}
|
|
className={`fixed inset-y-0 right-0 z-[101] flex w-[min(23rem,94vw)] flex-col rounded-l-[2rem] border-l border-line bg-canvas transition-transform duration-300 ${
|
|
drawerOpen ? "translate-x-0" : "hidden"
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between px-5 py-5">
|
|
<div>
|
|
<p className="text-xs font-semibold text-muted">{isPt ? "Navegação" : "Navigation"}</p>
|
|
<p className="mt-1 font-display text-2xl font-semibold tracking-[-0.04em] text-ink">{isPt ? "Para onde ir" : "Where to go"}</p>
|
|
</div>
|
|
<button
|
|
ref={closeRef}
|
|
type="button"
|
|
onClick={() => setDrawerOpen(false)}
|
|
className="grid h-10 w-10 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
|
|
aria-label={isPt ? "Fechar menu" : "Close menu"}
|
|
>
|
|
<X className="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
|
|
{isPt && (
|
|
<div className="px-4 pb-2">
|
|
<Link
|
|
href="/pt/livro"
|
|
onClick={() => setDrawerOpen(false)}
|
|
className="group grid grid-cols-[3.25rem_1fr_auto] items-center gap-3 rounded-2xl bg-[#0b0d10] p-3 text-[#f4f6f8] ring-1 ring-white/10"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src="/livro/capa.jpg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
width={52}
|
|
height={78}
|
|
className="h-[78px] w-[52px] rounded-md object-cover shadow-lg"
|
|
/>
|
|
<span className="min-w-0">
|
|
<span className="text-[0.6875rem] font-semibold text-[#75cdc1]">Livro novo</span>
|
|
<span className="mt-1 block font-display text-lg font-semibold leading-tight">Microcontroladores ESP32</span>
|
|
<span className="mt-1 block text-xs text-[#a6afbd]">Conectividade, eficiência e desempenho</span>
|
|
</span>
|
|
<ArrowRight className="h-4 w-4 shrink-0 text-[#75cdc1] transition-transform duration-300 group-hover:translate-x-1" aria-hidden="true" />
|
|
</Link>
|
|
</div>
|
|
)}
|
|
|
|
<nav className="flex-1 overflow-y-auto px-3 py-2" aria-label={isPt ? "Navegação móvel" : "Mobile navigation"}>
|
|
{visibleMobileLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={getLinkHref(link.href)}
|
|
onClick={() => setDrawerOpen(false)}
|
|
className="group flex min-h-11 items-center justify-between gap-3 rounded-xl px-3 text-sm font-medium text-ink-soft transition-colors hover:bg-surface-2 hover:text-ink"
|
|
aria-current={isActivePath(pathname, link.href, currentLocale) ? "page" : undefined}
|
|
>
|
|
{link.label}
|
|
<ArrowRight className="h-4 w-4 text-faint transition-transform duration-300 group-hover:translate-x-0.5 group-hover:text-accent" aria-hidden="true" />
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-4 pt-2">
|
|
<Link href={getLinkHref("/seletor")} onClick={() => setDrawerOpen(false)} className="btn btn-primary w-full">
|
|
<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
|
|
{isPt ? "Selecionar meu chip" : "Select my chip"}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</>,
|
|
document.body
|
|
)}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function ThemeToggle({ isPt = true }) {
|
|
const { resolvedTheme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
if (!mounted) {
|
|
return <span className="h-11 w-11 rounded-full border border-line bg-surface-2" aria-hidden="true" />;
|
|
}
|
|
|
|
const dark = resolvedTheme === "dark";
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => setTheme(dark ? "light" : "dark")}
|
|
className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
|
|
aria-label={dark ? (isPt ? "Ativar tema claro" : "Switch to light theme") : (isPt ? "Ativar tema escuro" : "Switch to dark theme")}
|
|
title={dark ? (isPt ? "Tema claro" : "Light theme") : (isPt ? "Tema escuro" : "Dark theme")}
|
|
>
|
|
{dark ? <Sun className="h-4 w-4" aria-hidden="true" /> : <Moon className="h-4 w-4" aria-hidden="true" />}
|
|
</button>
|
|
);
|
|
}
|