diff --git a/src/components/ui/resizable-navbar.tsx b/src/components/ui/resizable-navbar.tsx index cc50c39..da08eb8 100644 --- a/src/components/ui/resizable-navbar.tsx +++ b/src/components/ui/resizable-navbar.tsx @@ -105,7 +105,9 @@ export const NavItems = ({ setHovered(null)} className={cn( - "absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2", + // absolute inset-0 hält die Links mittig, liegt aber über Theme-Schalter und Kontakt-Button: + // der Container nimmt deshalb keine Mausklicks an (pointer-events-none), nur die Links selbst. + "pointer-events-none absolute inset-0 hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2", className )} > @@ -114,7 +116,7 @@ export const NavItems = ({ const commonProps = { onMouseEnter: () => setHovered(idx), onClick: onItemClick, - className: "relative px-4 py-2 text-neutral-900 dark:text-neutral-300", + className: "pointer-events-auto relative px-4 py-2 text-neutral-900 dark:text-neutral-300", key: `link-${idx}`, }; const inner = ( diff --git a/src/test/sofort-paket.test.tsx b/src/test/sofort-paket.test.tsx index 31c04de..829fa7e 100644 --- a/src/test/sofort-paket.test.tsx +++ b/src/test/sofort-paket.test.tsx @@ -471,3 +471,18 @@ describe("A2 Hintergrundbilder nur im dunklen Modus", () => { expect(bild).toHaveClass("hidden", "dark:block"); }); }); + +describe("A3 Navigation: Theme-Schalter, Kontakt und Logo bekommen echte Mausklicks", () => { + it("der absolut gelegte Link-Container fängt keine Mausklicks ab, die Links selbst schon", () => { + zeige(
); + const link = screen.getAllByRole("link", { name: "Leistungen" })[0]; + const container = link.parentElement as HTMLElement; + // bleibt mittig über die ganze Leiste gelegt (Optik unverändert) … + expect(container).toHaveClass("absolute", "inset-0", "justify-center"); + // … lässt Klicks aber zum Theme-Schalter, zum Kontakt-Button und zum Logo durch + expect(container).toHaveClass("pointer-events-none"); + for (const name of ["Über uns", "Leistungen", "Ablauf"]) { + expect(screen.getAllByRole("link", { name })[0]).toHaveClass("pointer-events-auto"); + } + }); +});