GRIDSHIFT · SF₆ Transition Portal · co-hosted by CTCN / UNEP and NDE Germany / HEAT · linked to IEA RETA + CTCN SF₆ Knowledge Hub
© 2026 HEAT GmbH · Königstein im Taunus · v2.4.1
);
const App = () => {
const [activePillar, setActivePillar] = React.useState("strategic");
const [country, setCountry] = React.useState("sen");
const [newsOpen, setNewsOpen] = React.useState(false);
const mainRef = React.useRef(null);
const onPillar = (id) => {
setActivePillar(id);
// scroll main to anchor
requestAnimationFrame(() => {
const el = document.getElementById(id);
if (el && mainRef.current) {
const top = el.offsetTop - 0;
mainRef.current.scrollTo({ top, behavior: "smooth" });
}
});
};
// observe pillars for scroll-based active state
React.useEffect(() => {
const main = mainRef.current;
if (!main) return;
const anchors = PILLARS.map(p => document.getElementById(p.id)).filter(Boolean);
const onScroll = () => {
const top = main.scrollTop + 120;
let current = anchors[0]?.id || "strategic";
for (const a of anchors) {
if (a.offsetTop <= top) current = a.id;
}
setActivePillar(prev => prev === current ? prev : current);
};
main.addEventListener("scroll", onScroll, { passive: true });
return () => main.removeEventListener("scroll", onScroll);
}, []);
return (