
How to get the off canvas menu to work in bootstrap 5.2
// Javascript
document.addEventListener(
'DOMContentLoaded',
function () {
'use strict';
const mainNav = document.querySelector('#mainNav');
if (mainNav) {
const navbarCollapse = document.querySelector('.navbar-toggler');
const menuOffcanvas = document.getElementById('sidebarmenu');
if (menuOffcanvas) {
menuOffcanvas.addEventListener(
'hide.bs.offcanvas',
() => {
navbarCollapse.classList.toggle('collapsed');
},
false
);
menuOffcanvas.addEventListener(
'show.bs.offcanvas',
() => {
navbarCollapse.classList.toggle('collapsed');
},
false
);
}
menuOffcanvas.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener(
'click',
(e) => {
e.preventDefault();
let anchorLink = anchor.getAttribute(['href']);
if (anchorLink === '#') return;
let anchorID = document.querySelector(anchorLink);
if (anchorID) {
let offset = mainNav.offsetHeight,
position = anchorID.offsetTop;
window.scrollTo({
top: position - offset,
behavior: 'smooth',
});
navbarCollapse.click();
} else alert(`debug: ${anchorLink} does not exist on the page`);
},
false
);
});
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener(
'click',
(e) => {
e.preventDefault();
let anchorLink = anchor.getAttribute(['href']);
if (anchorLink === '#') return;
let anchorID = document.querySelector(anchorLink);
if (anchorID) {
let offset = mainNav.offsetHeight,
position = anchorID.offsetTop;
window.scrollTo({
top: position - offset,
behavior: 'smooth',
});
} else alert(`debug: ${anchorLink} does not exist on the page`);
},
false
);
});
}
const copyrights = [...document.querySelectorAll('[data-copyright]')];
const brands = [...document.querySelectorAll('[data-brand]')];
copyrights.forEach((c) => {
c.textContent = `Copyright © ${new Date().getFullYear()} ${document.title}`;
});
brands.forEach((c) => {
c.textContent = `${document.title}`;
});
const scrollTopBtn = document.getElementById('myBtn');
if (scrollTopBtn) {
document.addEventListener('scroll', () =>
document.body.scrollTop > 20 || document.documentElement.scrollTop > 20 ? (scrollTopBtn.style.display = 'block') : (scrollTopBtn.style.display = 'none')
);
scrollTopBtn.addEventListener(
'click',
() => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
},
false
);
}
},
false
);