"use client";
// app/components/Header.tsx
import Link from "next/link";
import { useEffect, useState } from "react";
export default function Header() {
const [theme, setTheme] = useState<"light" | "dark">("light");
const [isTop, setIsTop] = useState(true);
// Initialise le thème en fonction du localStorage ou de la préférence système
useEffect(() => {
const saved = typeof window !== "undefined" ? localStorage.getItem("theme") : null;
const prefersDark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const initial = (saved === "light" || saved === "dark") ? (saved as "light" | "dark") : (prefersDark ? "dark" : "light");
setTheme(initial);
document.documentElement.setAttribute("data-theme", initial);
}, []);
// Détecte si l'on est tout en haut de la page
useEffect(() => {
const onScroll = () => setIsTop(window.scrollY <= 0);
onScroll(); // état initial au chargement
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const toggleTheme = () => {
const next = theme === "dark" ? "light" : "dark";
setTheme(next);
document.documentElement.setAttribute("data-theme", next);
try {
localStorage.setItem("theme", next);
} catch {}
};
return (
Anthony Violet
Développeur Freelance & Digital Nomad
Travaillons ensemble
/*
*/
);
} 