Is there a way to have the sidebar automatically collapsed when the page loads, rather than having to click on the collapse button? How can I achieve this?
The HTML structure:
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fa fa-bars"></i>
</button>
</div>
<ul class="list-unstyled components">
<li class="nav-item active">
----------------
</ul>
</nav>
<div id="base" class="col pt-2" style="overflow: auto;">
</div>
</div>
</div>
The JavaScript function:
$('#sidebar').addClass('active'); // Add this line to have the sidebar collapsed by default
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
$("#sidebar .nav-item").on("click", function () {
$("#sidebar .nav-item").removeClass("active");
$(this).addClass("active");
});
The CSS styles:
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}