Closing Sidebar by Clicking Outside

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

image

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.

@richards