Navigation: Theme-Schalter und Kontakt-Button bekommen wieder Mausklicks
Der Link-Container der Desktop-Navigation ist "absolute inset-0" (hält die Links mittig), lag dadurch aber über .navbar-actions und schluckte alle Mausklicks auf Theme-Schalter und Kontakt-Button ab 1024 px. Der Container ist jetzt pointer-events-none, die Links pointer-events-auto; Position und Optik bleiben identisch, die Hover-Pille der Links funktioniert weiter. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
b2e17d96c2
commit
0d12bbc06a
2 files changed
+19
-2
No files matched your search
@@ -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(<Header />);
|
||||
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");
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user