My project is using the Admin LTE 3 theme and I have set up the layout.html as follows:
<div class="wrapper w-100">
<!-- Navbar -->
<app-header></app-header>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<app-sidebar></app-sidebar>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<router-outlet></router-outlet>
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<app-control-sidebar></app-control-sidebar>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<!-- <app-starter-footer></app-starter-footer> -->
The sidebar.component.html code looks like this:
<aside class="main-sidebar sidebar-light-primary sidebar-no-expand" (mouseover)="removeCollapse($event)">
<!-- Brand Logo -->
<a href="/" class="brand-link border-0"> <span class="brand-text p-3 cl-font-weight-600">Logo</span> </a>
<!-- Sidebar -->
// rest of the content here
And for the header component, this is the code snippet from header.component.html:
<nav class="main-header navbar navbar-expand navbar-white navbar-light border-0">
<!-- Left navbar links -->
<ul class="navbar-nav align-items-center">
<li class="nav-item"> <a class="nav-link h-auto" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li>
<li class="nav-item d-none d-sm-inline-block"> <a href="/" class="nav-link nav-heading cl-font-weight-600 py-1">Discover</a> </li>
</ul>
<ul class="navbar-nav text-center mobile-logo">
<li class="w-100">
<p class="mb-0">Logo</p>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link explainer-link d-flex" href="#"> <img src="assets/img/play-button.png" alt="" class="img-fluid">
<p class="mb-0 ml-2">Explainer video</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link message-link d-flex align-items-center" href="#">
<p class="message-text cl-anchor mb-0">Ask To Help</p> <img src="assets/img/message-img.png" alt="" class="img-fluid ml-2"> </a>
</li>
</ul>
<div class="sidebar">
I am facing an issue with toggling the sidebar in Admin LTE 3. When trying to use a custom button instead of the provided toggle button, the sidebar collapses unexpectedly. I need help in figuring out how to toggle the left sidebar specifically using a custom button.
If anyone knows of a function or method that can be used to toggle the AdminLTE-3 sidebar, please share the solution with me. Thank you!