/* ============================================================
Roman Felden — Composants partagés
Navbar, footer, toggle thème, animations au scroll
============================================================ */
const navbarHTML = `
`;
const footerHTML = `
`;
document.addEventListener("DOMContentLoaded", () => {
const body = document.body;
body.insertAdjacentHTML("afterbegin", navbarHTML);
body.insertAdjacentHTML("beforeend", footerHTML);
/* ---------- Lien actif ---------- */
const page = window.location.pathname.split("/").pop();
const activeMap = {
"": "nav-index",
"index.html": "nav-index",
"cv.html": "nav-cv",
"cv-roman-felden.html": "nav-cv",
"projets.html": "nav-projets",
};
const activeId = activeMap[page];
if (activeId) document.getElementById(activeId)?.classList.add("active");
/* ---------- Thème ---------- */
const toggleBtn = document.getElementById("theme-toggle");
const sunIcon = document.getElementById("theme-icon-sun");
const moonIcon = document.getElementById("theme-icon-moon");
const applyTheme = (theme) => {
document.documentElement.setAttribute("data-theme", theme);
sunIcon.style.display = theme === "dark" ? "block" : "none";
moonIcon.style.display = theme === "dark" ? "none" : "block";
};
const saved = localStorage.getItem("theme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
applyTheme(saved || (prefersDark ? "dark" : "light"));
toggleBtn.addEventListener("click", () => {
const current = document.documentElement.getAttribute("data-theme");
const next = current === "dark" ? "light" : "dark";
localStorage.setItem("theme", next);
applyTheme(next);
});
/* ---------- Apparition au scroll ---------- */
const revealEls = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window && revealEls.length) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.08, rootMargin: "0px 0px -40px 0px" }
);
revealEls.forEach((el) => observer.observe(el));
} else {
revealEls.forEach((el) => el.classList.add("is-visible"));
}
});