feat: sidebar left toggle custom icon

Author: mledour

library/angular-admin-lte/src/lib/layout/header/header.component.css

@@ -12,3 +12,7 @@
   line-height: 20px;
   cursor: pointer;
 }
+
+.sidebar-toggle-custom-icon:before {
+  content: '';
+}

library/angular-admin-lte/src/lib/layout/header/header.component.html

@@ -4,11 +4,11 @@
     <span class="logo-lg"><ng-template [ngTemplateOutlet]="headerLogoComponent?.templateRef"></ng-template></span>
   </a>
   <nav class="navbar navbar-static-top">
-    <a *ngIf="isSidebarLeftToggle" #sidebarLeftToggleElement href="#" class="sidebar-toggle">
+    <a *ngIf="isSidebarLeftToggle" #sidebarLeftToggleElement href="#" class="sidebar-toggle {{sidebarLeftToggleIconClasses ? 'sidebar-toggle-custom-icon' : ''}}">
       <span class="sr-only">Toggle navigation</span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
+      <ng-container *ngIf="sidebarLeftToggleIconClasses">
+        <i [class]="sidebarLeftToggleIconClasses"></i>
+      </ng-container>
     </a>
     <div *ngIf="isSidebarRightToggle" class="sidebar-right-toggle">
       <a #sidebarRightToggleElement href="#"><i class="fa fa-gears"></i></a>

library/angular-admin-lte/src/lib/layout/header/header.component.ts

@@ -54,6 +54,7 @@ export class HeaderComponent implements AfterViewInit, OnDestroy {
   private subscriptions = [];
 
   @Input() isSidebarLeftToggle = true;
+  @Input() sidebarLeftToggleIconClasses;
   @Input() isSidebarRightToggle = true;
   @Input() logoLink: string | any[] = '/';
 

src/app/+layout/header/header.component.html

@@ -32,6 +32,12 @@
         <td>true</td>
         <td>Defines if the sidebar left toggle button is activated.</td>
       </tr>
+      <tr>
+        <td>sidebarLeftToggleIconClasses</td>
+        <td>string</td>
+        <td>null</td>
+        <td>Defines the sidebar left toggle button icon classes.</td>
+      </tr>
       <tr>
         <td>isSidebarLeftToggle</td>
         <td>boolean</td>