Evandro Fonseca JuniorandClaude Sonnet 5.5
2b5b4a2267
- ExperienceDisclosure abre a gaveta em >=1024px e quando o link aponta para #experience/#skills; no celular segue recolhida - novo item Experiencia em NAVIGATION_ITEMS (desktop e menu mobile); testes do Header atualizados Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { type ReactNode, useEffect, useState } from "react";
|
|
|
|
const TARGETS = new Set(["#experience", "#skills"]);
|
|
|
|
/**
|
|
* Skills e Experiência ficavam numa gaveta sempre fechada e sem link no menu.
|
|
* Agora abre sozinha em telas largas (onde há espaço) e quando um link aponta para #experience ou #skills;
|
|
* no celular continua recolhida para a página não crescer.
|
|
*/
|
|
export default function ExperienceDisclosure({
|
|
children,
|
|
}: {
|
|
children: ReactNode;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const reveal = (hash: string) => {
|
|
if (!TARGETS.has(hash)) return;
|
|
setOpen(true);
|
|
// espera o React abrir a gaveta para o alvo existir no layout
|
|
requestAnimationFrame(() =>
|
|
document
|
|
.getElementById(hash.slice(1))
|
|
?.scrollIntoView({ behavior: "instant", block: "start" }),
|
|
);
|
|
};
|
|
if (window.matchMedia("(min-width: 1024px)").matches) setOpen(true);
|
|
else if (TARGETS.has(window.location.hash)) setOpen(true);
|
|
|
|
const onClick = (event: MouseEvent) => {
|
|
const link =
|
|
event.target instanceof Element
|
|
? event.target.closest("a[href*='#']")
|
|
: null;
|
|
if (!(link instanceof HTMLAnchorElement)) return;
|
|
const url = new URL(link.href);
|
|
if (url.pathname === window.location.pathname) reveal(url.hash);
|
|
};
|
|
const onHashChange = () => reveal(window.location.hash);
|
|
document.addEventListener("click", onClick);
|
|
window.addEventListener("hashchange", onHashChange);
|
|
return () => {
|
|
document.removeEventListener("click", onClick);
|
|
window.removeEventListener("hashchange", onHashChange);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<details
|
|
open={open}
|
|
onToggle={(event) => setOpen(event.currentTarget.open)}
|
|
className="ds-section !pt-0"
|
|
>
|
|
<summary className="ds-section-shell cursor-pointer py-sp-5 text-lg font-semibold">
|
|
Experiência e tecnologias por trás das entregas
|
|
</summary>
|
|
{children}
|
|
</details>
|
|
);
|
|
}
|