hazza/hinode
1
0
Fork 0
mirror of https://github.com/gethinode/hinode.git synced 2025-10-07 10:04:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix navbar style on page reloads and theme updates

Browse Source
This commit is contained in:
Mark Dumay
2024-02-11 08:28:16 +01:00
parent 7c3aed4822
commit 9e52107dbf
1 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
assets/js/navbar.js
View File

@@ -3,7 +3,36 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed') const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
const colorsBG = ['body', 'secondary', 'tertiary'] const colorsBG = ['body', 'secondary', 'tertiary']
function updateNavbar () {
if (window.scrollY > 75) {
navbar.classList.add('nav-active')
const storedTheme = localStorage.getItem('theme')
navbar.setAttribute('data-bs-theme', storedTheme)
} else {
navbar.classList.remove('nav-active')
const defaultTheme = navbar.getAttribute('data-bs-overlay')
navbar.setAttribute('data-bs-theme', defaultTheme)
}
}
if ((navbar !== null) && (window.performance.getEntriesByType)) {
if (window.performance.getEntriesByType('navigation')[0].type === 'reload') {
updateNavbar()
}
}
if (navbar !== null && togglers !== null) { if (navbar !== null && togglers !== null) {
// observe state changes to the site's color mode
const html = document.querySelector('html')
const config = {
attributes: true,
attributeFilter: ['data-bs-theme']
}
const Observer = new MutationObserver((mutationrecords) => {
updateNavbar()
})
Observer.observe(html, config)
// initialize background color // initialize background color
const color = (navbar.getAttribute('data-navbar-color') || 'body') const color = (navbar.getAttribute('data-navbar-color') || 'body')
const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})` const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
@@ -11,15 +40,7 @@ if (navbar !== null && togglers !== null) {
// set the navbar background color to opaque when scrolling past a breakpoint // set the navbar background color to opaque when scrolling past a breakpoint
window.onscroll = () => { window.onscroll = () => {
if (window.scrollY > 75) { updateNavbar()
navbar.classList.add('nav-active')
const storedTheme = localStorage.getItem('theme')
navbar.setAttribute('data-bs-theme', storedTheme)
} else {
navbar.classList.remove('nav-active')
const defaultTheme = navbar.getAttribute('data-bs-overlay')
navbar.setAttribute('data-bs-theme', defaultTheme)
}
} }
// set the navbar background color to opaque when expanded // set the navbar background color to opaque when expanded