https://www.abt-sportsline.de/typo3temp/assets/compressed/HeaderMa…37baee85ed2bdf92fc8fb0cb14269.js?1789569026

1class AbtHeaderMain extends HTMLElement {
2    open = false;
3    constructor() {
4        super();
5
6        this.buttonToggle = this.querySelector('[data-target="abt-header-main-navigation"]');
7        this.buttonToggle.addEventListener('click', this.onToggleNavigation.bind(this));
8
9        this.header = document.querySelector('.abt-header');
10        this.navigation = document.querySelector('#abt-header-main-navigation');
11        this.backdrop = document.querySelector('#abt-header-backdrop');
12
13        if (this.header) this.shapes = this.header.querySelector('.abt-shapes');
14
15        this.addEventListener('mouseenter', this.onMouseenter.bind(this));
16        this.addEventListener('mouseleave', this.onMouseleave.bind(this));
17
18        document.addEventListener('scroll', this.onScroll.bind(this));
19
20        this.onScroll();
21    }
22
23    onMouseenter() {
24        if (this.shapes) this.shapes.classList.add('hover');
25    }
26
27    onMouseleave() {
28        if (this.shapes && !this.open) this.shapes.classList.remove('hover');
29    }
30
31    onToggleNavigation() {
32        this.open = !this.open;
33
34        document.body.classList.toggle('overflow-y-hidden', this.open);
35
36        if (this.buttonToggle) {
37            this.buttonToggle.setAttribute('aria-expanded', this.open);
38
39            const useHref = this.open
40                ? '/typo3conf/ext/user_seventeen/Resources/Public/Icons/general.svg#icon-close'
41                : '/typo3conf/ext/user_seventeen/Resources/Public/Icons/general.svg#icon-burger';
42
43            const useElement = this.buttonToggle.querySelector('use');
44
45            if (useElement) useElement.setAttribute('xlink:href', useHref);
46        }
47
48        if (this.navigation) this.navigation.classList.toggle('open', this.open);
49        if (this.shapes) this.shapes.classList.add('hover');
50
51        if (this.open) this.buttonToggle.focus();
52        else this.buttonToggle.blur();
53    }
54
55    onScroll() {
56        if (this.backdrop && this.header) {
57            this.backdrop.classList.toggle('scrolled', window.scrollY > this.header.clientHeight);
58        }
59    }
60}
61
62customElements.define('abt-header-main', AbtHeaderMain);