I have this sidebar
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');});