Issue
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 class="bg-dark h-100" id="sidebar-wrapper">
<div class="sidebar-heading bg-dark text-light fw-bold newFont2">
<i class="fa-solid fa-globe me-1"></i> domain.com
</div>
<div class="list-group list-group-flush">
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard" current-page="absolute">
<i class=" fa-solid fa-house-user text-info "></i>
<span class="align-middle">Home</span>
</a>
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/reviews">
<i class=" fa-solid fa-star-half-stroke "></i>
<span class="align-middle">Reviews</span>
</a>
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/invitations">
<i class=" fa-solid fa-envelope "></i>
<span class="align-middle">Invitations</span>
</a>
<a class="list-group-item bg-sidebar px-3 py-2" href="https://example.com/company/dashboard/settings">
<i class=" fa-solid fa-wrench "></i>
<span class="align-middle">Settings</span>
</a>
<div class="border-top my-3" href="#"></div>
<div class="plan-overview px-3">
<span class="text-white-50 newFont d-block">Selected plan: <span class="fw-bold text-light">Expert Plan</span>
<br>Available actions: <span class="fw-bold text-light ">646 left</span>
<br>
</span>
</div>
</div>
</div>
</nav>
And here's the button
<button class="btn navbar-toggler2" id="sidebarToggle"><i class="navbar-toggler-icon"></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"))}))}));
Solution
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');});
Answered By - Ultrazz008
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.