Home > Mobile >  Collapsible sidebar with Bootstrap 5 was working before but not now
Collapsible sidebar with Bootstrap 5 was working before but not now

Time:10-27

I have this sidebar

viz1

which should be toggled when the button on the right corner of the photo is clicked. Unfortunately it is not working now but it was worked before. I have no idea what might be the problem.

Here is the HTML output for the sidebar

<nav id="sidebar">
  <div  id="sidebar-wrapper">
    <div >
      <i ></i> domain.com
    </div>
    <div >
      <a  href="https://example.com/company/dashboard" current-page="absolute">
        <i ></i>
        <span >Home</span>
      </a>
      <a  href="https://example.com/company/dashboard/reviews">
        <i ></i>
        <span >Reviews</span>
      </a>
      <a  href="https://example.com/company/dashboard/invitations">
        <i ></i>
        <span >Invitations</span>
      </a>
      <a  href="https://example.com/company/dashboard/settings">
        <i ></i>
        <span >Settings</span>
      </a>
      <div  href="#"></div>
      <div >
        <span >Selected plan: <span >Expert Plan</span>
          <br>Available actions: <span >646 left</span>
          <br>
        </span>
      </div>
    </div>
  </div>
</nav>

And here's the button

<button  id="sidebarToggle"><i ></i></button>

I'm using Bootstrap v5.0.2. I can actually see following the scripts that are loaded on the page, that I'm using something called Simple Sidebar

/*!
* Start Bootstrap - Simple Sidebar v6.0.3 (https://startbootstrap.com/template/simple-sidebar)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
window.addEventListener("DOMContentLoaded",(e=>{const t=document.body.querySelector("#sidebarToggle");t&&t.addEventListener("click",(e=>{e.preventDefault(),document.body.classList.toggle("sb-sidenav-toggled"),localStorage.setItem("sb|sidebar-toggle",document.body.classList.contains("sb-sidenav-toggled"))}))}));

CodePudding user response:

First check if on click of the button, does body toggles class sb-sidenav-toggled, if it does, check your css as it works on css, the #sidebar-wrapper should get margin-left after the class toggles.

Otherwise it's js problem, not loaded/somethings stops it before it get's triggered, or some errors within ?

EDIT:

So it was just something preventing or not declared properly onclick, so declaring on click was solution:

$("#sidebarToggle").on('click', function() {$('body').toggleClass('sb-sidenav-toggled');});
  • Related