https://www.inforegister.ee/wp-content/themes/inforegister/blocks/header/header.js

1(() => {
2    const triggerElement = document.querySelector('.js-header__actions-trigger');
3    const actionsContainerElement = document.querySelector('.js-header__actions-container');
4
5    triggerElement.addEventListener('click', (event) => {
6        actionsContainerElement.classList.toggle('-hidden-on-mobile');
7    });
8
9    document.addEventListener('click', (event) => {
10        if (
11            !triggerElement.contains(event.target)
12            && !actionsContainerElement.contains(event.target)
13        ) {
14            actionsContainerElement.classList.add('-hidden-on-mobile');
15        }
16    });
17})();
18
19(() => {
20    const dropdowns = Array.from(document.querySelectorAll('.header__nav-dropdown'));
21
22    if (!dropdowns.length) {
23        return;
24    }
25
26    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
27    const animate = !CSS.supports('-moz-appearance', 'none');
28
29    const setup = (dropdown) => {
30        const summary = dropdown.querySelector('summary');
31        const menu = dropdown.querySelector('.mega-menu');
32
33        const onAnimationDone = (callback, maxDuration) => {
34            let done = false;
35            const finish = () => {
36                if (!done) {
37                    done = true;
38                    callback();
39                }
40            };
41
42            if (menu) {
43                menu.addEventListener('animationend', finish, { once: true });
44                menu.addEventListener('animationcancel', finish, { once: true });
45            }
46            setTimeout(finish, maxDuration);
47        };
48
49        const closeWithAnimation = () => {
50            if (!dropdown.open || dropdown.classList.contains('-closing')) {
51                return;
52            }
53
54            if (!animate || !menu || reducedMotion.matches) {
55                dropdown.open = false;
56                return;
57            }
58
59            dropdown.classList.add('-closing', '-animating');
60            onAnimationDone(() => {
61                dropdown.classList.remove('-closing', '-animating');
62                dropdown.open = false;
63            }, 350);
64        };
65
66        if (summary && animate && menu) {
67            summary.addEventListener('click', (event) => {
68                if (reducedMotion.matches) {
69                    return;
70                }
71
72                if (!dropdown.open) {
73                    dropdown.classList.add('-animating');
74                    onAnimationDone(() => dropdown.classList.remove('-animating'), 400);
75                    return;
76                }
77
78                event.preventDefault();
79                closeWithAnimation();
80            });
81        }
82
83        return closeWithAnimation;
84    };
85
86    const closers = dropdowns.map((dropdown) => ({ dropdown, close: setup(dropdown) }));
87
88    document.addEventListener('click', (event) => {
89        closers.forEach(({ dropdown, close }) => {
90            if (dropdown.open && !dropdown.contains(event.target)) {
91                close();
92            }
93        });
94    });
95})();