Fix navbar handling

This commit is contained in:
mark
2023-05-08 17:03:08 +02:00
parent ef3d79f875
commit fda4efa72b

View File

@@ -2,23 +2,25 @@ const navbar = document.querySelector('.navbar')
const toggler = document.getElementById('main-nav-toggler') const toggler = document.getElementById('main-nav-toggler')
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed') const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
// set the navbar background color to opaque when scrolling past a breakpoint if (navbar !== null && toggler !== null) {
window.onscroll = () => { // set the navbar background color to opaque when scrolling past a breakpoint
if (window.scrollY > 75) { window.onscroll = () => {
navbar.classList.add('nav-active') if (window.scrollY > 75) {
} else { navbar.classList.add('nav-active')
navbar.classList.remove('nav-active') } else {
} navbar.classList.remove('nav-active')
} }
}
// set the navbar background color to opaque when expanded
toggler.onclick = () => { // set the navbar background color to opaque when expanded
navbar.classList.toggle('navbar-expanded') toggler.onclick = () => {
} navbar.classList.toggle('navbar-expanded')
}
// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
for (let i = 0; i < modeSelectors.length; ++i) { // invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
modeSelectors[i].onclick = () => { for (let i = 0; i < modeSelectors.length; ++i) {
toggler.click() modeSelectors[i].onclick = () => {
toggler.click()
}
} }
} }