"use client"; import { useEffect, useState } from "react"; import Link from "next/link"; import Image from "next/image"; const SCROLL_DURATION = 800; function smoothScrollTo(targetY: number) { const startY = window.scrollY; const distance = targetY - startY; const startTime = performance.now(); function step(now: number) { const elapsed = now - startTime; const progress = Math.min(elapsed / SCROLL_DURATION, 1); const ease = progress < 0.5 ? 4 * progress ** 3 : 1 - (-2 * progress + 2) ** 3 / 2; window.scrollTo(0, startY + distance * ease); if (progress < 1) requestAnimationFrame(step); } requestAnimationFrame(step); } const navLinks = [ { label: "Werkzeuge", href: "#werkzeuge" }, { label: "Blog", href: "#blog" }, { label: "Über Björn", href: "#ueber-bjoern" }, { label: "Shop", href: "/shop" }, ]; export function Navbar() { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // Close mobile menu on resize to desktop useEffect(() => { const onResize = () => { if (window.innerWidth >= 1024) setMenuOpen(false); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); const handleAnchorClick = (e: React.MouseEvent, href: string) => { e.preventDefault(); setMenuOpen(false); const navH = window.innerWidth >= 1024 ? 100 : 80; // desktop / mobile navbar px const el = document.getElementById(href.slice(1)); if (el) smoothScrollTo(el.getBoundingClientRect().top + window.scrollY - navH); history.replaceState(null, "", href); }; const blurred = scrolled || menuOpen; return (
{/* Main bar */}
{/* Logo */} einfach produktiv {/* Desktop nav */} {/* Desktop CTAs */}
Newsletter 7-Tage-Challenge
{/* Mobile hamburger — animated to ✕ */}
{/* Mobile dropdown — max-h animation */}
); }