http://www.accessgaragedoorsla.com/templates/sapphire/js/sapphire.js

1let navWidth = null
2const primaryHeader = document.querySelector('header')
3const headerArea = document.querySelector('.header')
4const menuToggle = document.querySelector('.menu-toggle')
5const menuToggleIcon = menuToggle.querySelector('i')
6const navigation = document.getElementById('navigation')
7const hasDropdown = document.querySelectorAll('.has-dropdown')
8const contentPane = document.querySelector('.contentPane')
9
10document.addEventListener("DOMContentLoaded", () => {
11    getNavWidth()
12    selectMenu()
13    assignPrimaryDepth()
14    changeTab()
15    contentPane.style.marginTop = `${primaryHeader.getBoundingClientRect().height}px`
16    console.log(contentPane.style.marginTop)
17
18});
19
20window.addEventListener('resize', () => {
21    closeAllSubMenus()
22    selectMenu()
23})
24
25menuToggle.addEventListener('click', () => {
26    toggleMobileMenu()
27})
28
29function assignArrowEvents(usingDesktopMenu) {
30    hasDropdown.forEach(menu => {
31        if (usingDesktopMenu) {
32            menu.addEventListener('mouseenter', openSubMenu)
33            menu.addEventListener('mouseleave', closeSubMenus)
34        } else {
35            menu.removeEventListener('mouseenter', openSubMenu)
36            menu.removeEventListener('mouseleave', closeSubMenus)
37        }
38        const opener = menu.querySelector('.arrow')
39        opener.addEventListener('click', function (ev) {
40            const parentMenu = this.parentNode.parentNode
41            ev.preventDefault()
42            if (parentMenu.getAttribute('opened') === 'true') {
43                closeSubMenus(parentMenu)
44            } else {
45                parentMenu.setAttribute('opened', 'true')
46                openSubMenu(parentMenu)
47            }
48        })
49    })
50}
51
52function getNavWidth() {
53    const headerChildren = headerArea.childNodes
54    navWidth = Array.from(headerChildren).filter(child => {
55        return child.offsetWidth
56    }).map((child) => {
57        return child.offsetWidth
58    }).reduce((total, inc) => {
59        return total + inc
60    })
61}
62
63function selectMenu() {
64    let usingDesktopMenu
65    if (navWidth > headerArea.getBoundingClientRect().width) {
66        showMobileMenu()
67        usingDesktopMenu = false
68    } else {
69        showDesktopMenu()
70        usingDesktopMenu = true
71    }
72    assignArrowEvents(usingDesktopMenu)
73}
74
75function changeTab() {
76    const tabs = document.querySelectorAll('.service-tab')
77    const tabContents = document.querySelectorAll('.service-tab-content')
78    if (tabs.length > 0) {
79        tabs[0].classList.add('active')
80        tabContents[0].style.display = 'flex';

81        tabs.forEach(tab => {
82            tab.addEventListener('click', function () {
83                let clickedTab = this.dataset.serviceTabLink
84                tabs.forEach(tab => {
85                    tab.classList.remove('active')
86                })
87                this.classList.add('active')
88                tabContents.forEach(tabContent => {
89                    if (tabContent.dataset.serviceTabContent === clickedTab) {
90                        tabContent.style.display = 'flex'
91                    } else {
92                        tabContent.style.display = 'none'
93                    }
94                })
95            })
96        })
97    }
98}
99
100function showMobileMenu() {
101    navigation.style.display = 'none'
102    navigation.parentElement.classList.add('mobile')
103    navigation.setAttribute('aria-expanded', 'false')
104    menuToggle.style.display = 'flex'
105}
106
107function showDesktopMenu() {
108    menuToggle.style.display = 'none'
109    closeMobileMenu()
110    navigation.parentElement.classList.remove('mobile')
111    navigation.style.display = 'flex'
112    navigation.removeAttribute('aria-expanded')
113}
114
115function toggleMobileMenu() {
116    let menuOpen = (navigation.getAttribute('aria-expanded') === 'true')
117    if (menuOpen) {
118        closeMobileMenu()
119    } else {
120        openMobileMenu()
121    }
122}
123
124function closeMobileMenu() {
125    navigation.setAttribute('aria-expanded', 'false')
126    navigation.style.display = 'none'
127    closeAllSubMenus()
128    menuToggleIcon.classList.remove('fa-times')
129    menuToggleIcon.classList.add('fa-bars')
130    document.body.style.overflow = 'auto'
131}
132
133function openMobileMenu() {
134    navigation.setAttribute('aria-expanded', 'true')
135    navigation.style.display = 'flex'
136    navigation.style.setProperty('top', `${primaryHeader.getBoundingClientRect().height}px`, 'important')
137    navigation.style.setProperty('max-height', `calc(100vh - ${primaryHeader.getBoundingClientRect().height}px)`)
138    menuToggleIcon.classList.remove('fa-bars')
139    menuToggleIcon.classList.add('fa-times')
140    document.body.style.overflow = 'hidden'
141}
142
143function openSubMenu(parentMenu) {
144    if (parentMenu.target) {
145        parentMenu.preventDefault()
146        parentMenu = parentMenu.target
147    }
148    closeSubMenus(parentMenu)
149    parentMenu.setAttribute('opened', 'true')
150    const subMenu = parentMenu.querySelector('.dropdown')
151    subMenu.style.display = 'flex'
152    if (parentMenu.getBoundingClientRect().x + subMenu.getBoundingClientRect().width > document.body.clientWidth) {
153        subMenu.style.left = 'auto'
154        if (parentMenu.dataset.depth === '0') {
155            subMenu.style.right = 0
156        } else {
157            subMenu.style.right = '100%'
158        }
159    } else {
160        subMenu.style.left = '0'
161        subMenu.style.right = 'auto'
162    }
163}
164
165function assignPrimaryDepth() {
166    const rootSubMenus = document.querySelectorAll('#navigation > .has-dropdown')
167    let i = 0
168    rootSubMenus.forEach((submenu, j) => {
169        submenu.setAttribute('data-depth', `${i}`)
170        submenu.setAttribute('data-tree', `${j}`)

171        assignSecondaryDepth(submenu, i, j)
172    })
173}
174
175function assignSecondaryDepth(el, i, j) {
176    const submenus = el.querySelectorAll(`[data-depth="${i}"] > .dropdown > .has-dropdown`)
177    i++
178    submenus.forEach((submenu) => {
179        submenu.setAttribute('data-depth', `${i}`)
180        submenu.setAttribute('data-tree', `${j}`)
181        assignSecondaryDepth(submenu, i, j)
182    })
183}
184
185function closeAllSubMenus() {
186    const subMenus = [...document.querySelectorAll('.dropdown')]
187    subMenus.forEach((submenu) => {
188        submenu.style.display = 'none'
189    })
190    hasDropdown.forEach((parentMenu) => {
191        parentMenu.setAttribute('opened', 'false')
192    })
193}
194
195function closeSubMenus(parentMenu) {
196    if (parentMenu.target) {
197        parentMenu.preventDefault()
198        parentMenu = parentMenu.target
199    }
200    const currentDepth = parentMenu.dataset.depth
201    const currentTree = parentMenu.dataset.tree
202    hasDropdown.forEach(menu => {
203        if (menu.dataset.tree !== currentTree || menu.dataset.depth >= currentDepth) {
204            menu.setAttribute('opened', 'false')
205            menu.querySelector('.dropdown').style.display = 'none'
206        }
207    })
208}