/* global React, Icon */ const { useState: useTopBarState, useEffect: useTopBarEffect, useRef: useTopBarRef } = React; const NAV_ITEMS = [ { label: "Hjem", href: "#" }, { label: "Ydelser", href: "#services", children: [ { label: "Tagreparation", href: "#" }, { label: "Tagrenovering", href: "#" }, { label: "Nyt tag", href: "#" }, { label: "Taginspektion", href: "#" }, { label: "Forsikringssager", href: "#" }, { label: "Stormskader", href: "#" }, ], }, { label: "Referencer", href: "#work" }, { label: "Om os", href: "#about", children: [ { label: "Karriere", href: "#" }, { label: "Blog", href: "#" }, ], }, { label: "Serviceområder", href: "#areas", children: [ { label: "Sønderborg", href: "#" }, { label: "Aabenraa", href: "#" }, { label: "Haderslev", href: "#" }, { label: "Kolding", href: "#" }, { label: "Vejle", href: "#" }, { label: "Odense", href: "#" }, ], }, { label: "Kontakt", href: "#contact" }, ]; function NavDropdown({ item, open, onToggle }) { const ref = useTopBarRef(null); useTopBarEffect(() => { if (!open) return; const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onToggle(null); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); return (
{open && (
{item.children.map((child) => ( {child.label} ))}
)}
); } function StarRating({ count = 5, fill = "#F2B636" }) { return ( {Array.from({ length: count }).map((_, i) => ( ))} ); } function TopBar({ onOpenQuote }) { const [scrolled, setScrolled] = useTopBarState(false); const [mobileOpen, setMobileOpen] = useTopBarState(false); const [openDrop, setOpenDrop] = useTopBarState(null); const [mobileExpanded, setMobileExpanded] = useTopBarState(null); useTopBarEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); useTopBarEffect(() => { if (mobileOpen) document.body.style.overflow = "hidden"; else document.body.style.overflow = ""; return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); return (
{/* ── TOP INFO BAR — white left (logo only) / cyan-blue right (all info) ── */}
{/* LEFT: white strip — decorative only, logo lives in the nav bar below */} {/* ── MAIN NAV ROW ── */}
{/* Logo — hidden at rest, slides in when scrolled */} Frederiksen & Jepsen A/S {/* Desktop nav */} {/* Phone + CTA */}
74 48 69 94
{/* Mobile hamburger */}
{/* ── MOBILE OVERLAY ── */} {mobileOpen && (
Frederiksen & Jepsen A/S
74 48 69 94
)}
); } Object.assign(window, { TopBar });