https://www.arcinclusion.com/wp-content/themes/hello-theme-child-master/assets/js/arc-header-menu.js?ver=1.0.1

1document.addEventListener('DOMContentLoaded', () => {
2    /**
3     * Set focus on the first element of the page on page load
4     * Disable browser's auto scroll/focus restoration
5     */
6    window.history.scrollRestoration = "manual";
7    
8    /**
9     * Set focus on the first element of the page on page load
10     * Clear any saved focus in session storage
11     */
12    sessionStorage.removeItem("lastFocusedElement");
13
14    /**
15    * Header Menu keyboard accessbility functions
16    */
17    const menuButtons = document.querySelectorAll('.top-menu-item-anchor[aria-haspopup="true"]');
18
19    menuButtons.forEach(button => {
20        const submenu = document.getElementById(button.getAttribute('aria-controls'));
21
22        button.addEventListener('keydown', e => {
23            if (e.key === 'Enter' || e.key === ' ') {
24                e.preventDefault();
25                const isExpanded = button.getAttribute('aria-expanded') === 'true';
26                closeAllSubmenus();
27                
28                if (!isExpanded) {
29                    button.setAttribute('aria-expanded', 'true');
30                    button.classList.add('highlighted');
31                
32                    if(window.innerWidth <= 1024) {
33                        slideDown(submenu);
34                    }
35
36                    // const firstSubItem = submenu.querySelector('a');
37                    // if (firstSubItem) firstSubItem.focus();
38                    
39                    setTimeout(() => {
40                        const firstSubItem = submenu.querySelector('a');
41                        if (firstSubItem) firstSubItem.focus();
42                    }, 200);
43                } else {
44                    if(window.innerWidth <= 1024) {
45                        slideUp(submenu);
46                    }
47                }
48            } else if (e.key === 'Tab') {
49                // Allow tab to naturally go to next menu item
50                closeAllSubmenus();
51            }
52        });
53
54        // Close submenu on Escape key within submenu
55        submenu.addEventListener('keydown', e => {
56            if (e.key === 'Escape') {
57                e.preventDefault();
58                closeSubmenu(button);
59                button.focus();
60            }
61        });
62    });
63
64    const menuLinks = document.querySelectorAll('.menu-item-anchor');
65
66    menuLinks.forEach(menuLink => {
67        const parentMenuItem = menuLink.closest(".menu-item-has-children");
68        // console.log(parentMenuItem);
69        
70        if (parentMenuItem) {
71            const submenu = menuLink.nextElementSibling;
72            console.log(submenu);
73            
74            parentMenuItem.addEventListener('mouseenter', function (e) {
75                menuLink.classList.add('highlighted');
76                menuLink.setAttribute('aria-expanded', 'true');
77            });
78            
79            parentMenuItem.addEventListener('mouseleave', function (e) {
80                menuLink.classList.remove('highlighted');
81                menuLink.setAttribute('aria-expanded', 'false');
82            });
83
84            if(window.innerWidth <= 1024) {
85                menuLink.addEventListener('click', function (e) {
86                    e.preventDefault();
87                    
88                    this.classList.add('highlighted');
89
90                    setTimeout(() => {
91                        const isExpanded = this.getAttribute('aria-expanded') === 'true';
92                        
93                        closeAllSubmenus();
94                        
95                        menuLink.setAttribute('aria-expanded', String(!isExpanded));
96
97                        if(!isExpanded) {
98                            slideDown(submenu);
99                        } else {
100                            slideUp(submenu);
101                        }
102                    }, 500);
103                });
104            }
105        }
106
107        menuLink.addEventListener("focus", function () {
108            if (!menuLink.closest(".sub-menu")) {
109                closeAllSubmenus();
110            }
111        });
112    });
113
114    if(window.innerWidth <= 1024) {
115        const topLevelMenuItems = document.querySelectorAll('.top-level-menu-item');

116        topLevelMenuItems.forEach((topLevelMenuItem, index) => {
117            topLevelMenuItem.addEventListener("keydown", function (e) {
118                var isTab = (e.key === 'Tab' || e.keyCode === 9) && !e.shiftKey;
119                
120                if (isTab) {                        
121                    if(index == topLevelMenuItems.length - 1) {
122                        e.preventDefault();
123                        // console.log('Last Menu Item');
124                        let menuItemToggle = document.querySelector('.arc-menu-toggle');
125                        menuItemToggle.focus();
126                    }
127                }
128            });
129        });
130    }
131
132    // Close all submenus when clicking outside
133    document.addEventListener('click', e => {
134        if (!e.target.closest('.arc-header-nav')) {
135            closeAllSubmenus();
136        }
137    });
138
139    function closeSubmenu(button) {
140        button.setAttribute('aria-expanded', 'false');
141        button.classList.remove('highlighted');
142
143        if(window.innerWidth <= 1024) {
144            const subMenu = button.nextElementSibling;
145            slideUp(subMenu);
146        }
147    }
148
149    function closeAllSubmenus() {
150        menuButtons.forEach(btn => {
151            btn.setAttribute('aria-expanded', 'false');
152            btn.classList.remove('highlighted');
153
154            if(window.innerWidth <= 1024) {
155                const subMenu = btn.nextElementSibling;
156                slideUp(subMenu);
157            }
158        });
159    }
160
161    const slideDown = elem => {
162        elem.style.height = `${elem.scrollHeight}px`
163    };
164
165    const slideUp = elem => {
166        elem.style.height = `0px`
167    };
168
169    // Mobile menu
170    const toggle = document.querySelector('.arc-menu-toggle');
171    const nav = document.querySelector('.arc-header-nav');
172
173    if (toggle && nav) {
174        toggle.addEventListener('click', () => {
175            const expanded = toggle.getAttribute('aria-expanded') === 'true';
176            toggle.setAttribute('aria-expanded', String(!expanded));
177            nav.classList.toggle('open');
178        });
179    }
180});