refactor(AppHeader): add reactive toggler class based on breakpoint

Author: xidedix

projects/coreui/angular/src/lib/header/app-header.component.html

@@ -1,5 +1,5 @@
 <ng-template [ngIf]="mobileSidebarToggler != false">
-  <button class="navbar-toggler d-lg-none" type="button" appSidebarToggler>
+  <button class="navbar-toggler {{sidebarTogglerMobileClass}}" type="button" appSidebarToggler>
     <span class="navbar-toggler-icon"></span>
   </button>
 </ng-template>
@@ -21,18 +21,18 @@
   </ng-template>
 </a>
 <ng-template [ngIf]="sidebarToggler != false">
-  <button class="navbar-toggler d-md-down-none" type="button" [appSidebarToggler]="sidebarToggler">
+  <button class="navbar-toggler {{sidebarTogglerClass}}" type="button" [appSidebarToggler]="sidebarToggler">
     <span class="navbar-toggler-icon"></span>
   </button>
 </ng-template>
 <ng-content></ng-content>
 <ng-template [ngIf]="asideMenuToggler != false">
-  <button class="navbar-toggler d-md-down-none" type="button" [appAsideMenuToggler]="asideMenuToggler">
+  <button class="navbar-toggler {{asideTogglerClass}}" type="button" [appAsideMenuToggler]="asideMenuToggler">
     <span class="navbar-toggler-icon"></span>
   </button>
 </ng-template>
 <ng-template [ngIf]="mobileAsideMenuToggler != false">
-  <button class="navbar-toggler d-lg-none" type="button" appAsideMenuToggler>
+  <button class="navbar-toggler {{asideTogglerMobileClass}}" type="button" appAsideMenuToggler>
     <span class="navbar-toggler-icon"></span>
   </button>
 </ng-template>

projects/coreui/angular/src/lib/header/app-header.component.ts

@@ -13,7 +13,7 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   @Input() navbarBrandFull: any;
   @Input() navbarBrandMinimized: any;
   @Input() navbarBrandText: any = {icon: '🅲', text: '🅲 CoreUI'};
-  @Input() navbarBrandHref: string = ''; // deprecated, use navbarBrandRouterLink instead
+  @Input() navbarBrandHref: ''; // deprecated, use navbarBrandRouterLink instead
   @Input() navbarBrandRouterLink: any[] | string = '';
 
   @Input() sidebarToggler: string | boolean;
@@ -25,6 +25,12 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   private readonly fixedClass = 'header-fixed';
   navbarBrandImg: boolean;
 
+  private readonly breakpoints = ['xl', 'lg', 'md', 'sm', 'xs'];
+  sidebarTogglerClass = 'd-none d-md-block';
+  sidebarTogglerMobileClass = 'd-lg-none';
+  asideTogglerClass = 'd-none d-md-block';
+  asideTogglerMobileClass = 'd-lg-none';
+
   constructor(
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
@@ -38,6 +44,10 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
     this.isFixed(this.fixed);
     this.navbarBrandImg = Boolean(this.navbarBrand || this.navbarBrandFull || this.navbarBrandMinimized);
     this.navbarBrandRouterLink = this.navbarBrandRouterLink[0] ? this.navbarBrandRouterLink : this.navbarBrandHref;
+    this.sidebarTogglerClass = this.setToggerBreakpointClass(<string>this.sidebarToggler);
+    this.sidebarTogglerMobileClass = this.setToggerMobileBreakpointClass(<string>this.sidebarToggler);
+    this.asideTogglerClass = this.setToggerBreakpointClass(<string>this.asideMenuToggler);
+    this.asideTogglerMobileClass = this.setToggerMobileBreakpointClass(<string>this.asideMenuToggler);
   }
 
   ngOnDestroy(): void {
@@ -49,4 +59,21 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
       this.renderer.addClass(this.document.body, this.fixedClass);
     }
   }
+
+  setToggerBreakpointClass(breakpoint = 'md') {
+    let togglerClass = 'd-none d-md-block';
+    if (this.breakpoints.includes(breakpoint)) {
+      const breakpointIndex = this.breakpoints.indexOf(breakpoint);
+      togglerClass = `d-none d-${breakpoint}-block`;
+    }
+    return togglerClass;
+  }
+
+  setToggerMobileBreakpointClass(breakpoint = 'lg') {
+    let togglerClass = 'd-lg-none';
+    if (this.breakpoints.includes(breakpoint)) {
+      togglerClass = `d-${breakpoint}-none`;
+    }
+    return togglerClass;
+  }
 }