Support navbar overlay

This commit is contained in:
Mark Dumay
2024-01-24 11:00:34 +01:00
parent d84099e41f
commit 0a2bc468e5
14 changed files with 94 additions and 13 deletions

View File

@@ -1,8 +1,14 @@
const navbar = document.querySelector('.navbar')
const togglers = document.querySelectorAll('.main-nav-toggler')
const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
const colorsBG = ['body', 'secondary', 'tertiary']
if (navbar !== null && togglers !== null) {
// initialize background color
const color = (navbar.getAttribute('data-navbar-color') || 'body')
const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
navbar.style.setProperty('--bs-navbar-expanded-color', bg)
// set the navbar background color to opaque when scrolling past a breakpoint
window.onscroll = () => {
if (window.scrollY > 75) {