Hi how do you Close the nav Sidebar by Clicking anywhere on the webpage?
thanks in advance
Difficult to say without seeing your code.
If you are refering to the SB admin template then you can replace your theme.js with:
(function() {
"use strict"; // Start of use strict
var sidebar = document.querySelector('.sidebar');
var sidebarToggles = document.querySelectorAll('#sidebarToggle, #sidebarToggleTop, #content');
if (sidebar) {
var collapseEl = sidebar.querySelector('.collapse');
var collapseElementList = [].slice.call(document.querySelectorAll('.sidebar .collapse'))
var sidebarCollapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl, { toggle: false });
});
for (var toggle of sidebarToggles) {
// Toggle the side navigation
toggle.addEventListener('click', function(e) {
if(this.id =="content" && sidebar.classList.contains("toggled") ) {// if the content is clicked and the sidebar is closed do nothing
} else{
document.body.classList.toggle('sidebar-toggled');
sidebar.classList.toggle('toggled');
}
if (sidebar.classList.contains('toggled')) {
for (var bsCollapse of sidebarCollapseList) {
bsCollapse.hide();
}
};
});
}
// Close any open menu accordions when window is resized below 768px
window.addEventListener('resize', function() {
var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
if (vw < 768) {
for (var bsCollapse of sidebarCollapseList) {
bsCollapse.hide();
}
};
});
}
// Prevent the content wrapper from scrolling when the fixed side navigation hovered over
var fixedNaigation = document.querySelector('body.fixed-nav .sidebar');
if (fixedNaigation) {
fixedNaigation.on('mousewheel DOMMouseScroll wheel', function(e) {
var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
if (vw > 768) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += (delta < 0 ? 1 : -1) * 30;
e.preventDefault();
}
});
}
var scrollToTop = document.querySelector('.scroll-to-top');
if (scrollToTop) {
// Scroll to top button appear
window.addEventListener('scroll', function() {
var scrollDistance = window.pageYOffset;
//check if user is scrolling up
if (scrollDistance > 100) {
scrollToTop.style.display = 'block';
} else {
scrollToTop.style.display = 'none';
}
});
}
})(); // End of use strict
This justs adds the #content to the list of toggles (line 5)
and line 21 will check if the #content has been clicked while the sidebar is toggled to small, if so it does nothing, else it will toggle the sidebar
I just noticed an issue with that. On mobile the sidebar toggle is in the #content div.
To get round it you need to give the first container on each page an ID of #dashboard
Then in the code posted above change #content to dashboard on line 5 and content to dashboard on line 21
Example here:
https://toggle.bss.design/
Install my Ultimate Sidebar Menu BS5 (search the online library.) It closes when you click anywhere on the page.