refactor(sidebar): drop sidebar-toggler component, use directive instead, use control flow, use @input() transform

Author: xidedix

projects/coreui-angular/src/lib/sidebar/public_api.ts

@@ -2,7 +2,7 @@ export { SidebarComponent } from './sidebar/sidebar.component';
 export { SidebarService } from './sidebar.service';
 export { SidebarBrandComponent } from './sidebar-brand/sidebar-brand.component';
 export { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directive';
-export { SidebarTogglerComponent } from './sidebar-toggler/sidebar-toggler.component';
+export { SidebarTogglerDirective } from './sidebar-toggler/sidebar-toggler.directive';
 export { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 export { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
 

projects/coreui-angular/src/lib/sidebar/sidebar-brand/sidebar-brand.component.html

@@ -1,12 +1,10 @@
 @if (brandImg) {
   <a [routerLink]="routerLink">
     @if (brandFull) {
-      <img [cHtmlAttr]="brandFull"
-           [ngClass]="'sidebar-brand-full'">
+      <img [cHtmlAttr]="brandFull" [ngClass]="'sidebar-brand-full'">
     }
     @if (brandNarrow) {
-      <img [cHtmlAttr]="brandNarrow"
-           [ngClass]="'sidebar-brand-narrow'">
+      <img [cHtmlAttr]="brandNarrow" [ngClass]="'sidebar-brand-narrow'">
     }
   </a>
 } @else {

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.component.html

@@ -12,15 +12,19 @@
   (@openClose.done)="onAnimationDone($event)"
   (@openClose.start)="onAnimationStart($event)"
   [@openClose]="open ? 'open' : 'closed'"
+  [compact]="compact"
   [dropdownMode]="dropdownMode"
   [groupItems]="true"
   [navItems]="navItems"
   [ngStyle]="display"
 />
 
 <ng-template #iconTemplate let-item>
+  <!--  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>-->
   @if (item?.icon) {
-    <i [ngClass]="item | cSidebarNavIcon"></i>
+    <span class="nav-icon">
+    <span [ngClass]="item.icon ?? ''"></span>
+  </span>
   }
   @if (item?.iconComponent) {
     <svg

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html

@@ -1,6 +1,6 @@
-<a [ngClass]="getItemClass()"
-   href="{{item.url}}"
-   [cHtmlAttr]="item.attributes">
+<a [cHtmlAttr]="item.attributes"
+   [ngClass]="getItemClass()"
+   href="{{item.url}}">
   @if (helper.hasIcon(item)) {
     <i [ngClass]="getLabelIconClass()"></i>
   }

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.html

@@ -1,8 +1,6 @@
 @switch (linkType) {
   @case ('disabled') {
-    <a [ngClass]="item | cSidebarNavLink"
-       [cHtmlAttr]="item.attributes ?? {}"
-    >
+    <a [cHtmlAttr]="item.attributes ?? {}" [ngClass]="item | cSidebarNavLink">
       <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}" />
       <c-sidebar-nav-link-content [item]="item" />
       @if (item.badge) {
@@ -11,11 +9,7 @@
     </a>
   }
   @case ('external') {
-    <a [ngClass]="item | cSidebarNavLink"
-       [href]="href"
-       [cHtmlAttr]="item.attributes ?? {}"
-       (click)="linkClicked()"
-    >
+    <a (click)="linkClicked()" [cHtmlAttr]="item.attributes ?? {}" [href]="href" [ngClass]="item | cSidebarNavLink">
       <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: item}" />
       <c-sidebar-nav-link-content [item]="item" />
       @if (item.badge) {
@@ -24,20 +18,20 @@
     </a>
   }
   @default {
-    <a [ngClass]="item | cSidebarNavLink"
+    <a (click)="linkClicked()"
        [cHtmlAttr]="item.attributes ?? {}"
-       [target]="item.attributes?.['target']"
-       [queryParams]="item.linkProps?.queryParams ?? null"
        [fragment]="item.linkProps?.fragment"
-       [queryParamsHandling]="item.linkProps?.queryParamsHandling"
+       [ngClass]="item | cSidebarNavLink"
        [preserveFragment]="item.linkProps?.preserveFragment ?? false"
-       [skipLocationChange]="item.linkProps?.skipLocationChange ?? false"
+       [queryParamsHandling]="item.linkProps?.queryParamsHandling"
+       [queryParams]="item.linkProps?.queryParams ?? null"
        [replaceUrl]="item.linkProps?.replaceUrl ?? false"
-       [state]="item.linkProps?.state ?? {}"
+       [routerLinkActiveOptions]="item.linkProps?.routerLinkActiveOptions ?? { exact: false }"
        [routerLink]="item.url"
+       [skipLocationChange]="item.linkProps?.skipLocationChange ?? false"
+       [state]="item.linkProps?.state ?? {}"
+       [target]="item.attributes?.['target']"
        routerLinkActive="active"
-       [routerLinkActiveOptions]="item.linkProps?.routerLinkActiveOptions ?? { exact: false }"
-       (click)="linkClicked()"
     >
       <!--    [class.active]="linkActive"-->
       <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}" />
@@ -48,16 +42,18 @@
     </a>
   }
 }
-
 <ng-template #iconTemplate let-item>
+  <!--  <i *ngIf="item?.icon" [ngClass]="item | cSidebarNavIcon"></i>-->
   @if (item?.icon) {
-    <i [ngClass]="item | cSidebarNavIcon"></i>
+    <span class="nav-icon">
+      <span [ngClass]="item.icon ?? ''"></span>
+    </span>
   }
   @if (item?.iconComponent) {
     <svg
       [cIcon]="item.iconComponent?.content"
-      [name]="item.iconComponent?.name"
       [customClasses]="item | cSidebarNavIcon"
+      [name]="item.iconComponent?.name"
     ></svg>
   }
   @if (!item?.icon && !item?.iconComponent) {

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-link.component.ts

@@ -1,8 +1,9 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
+import { IconDirective } from '@coreui/icons-angular';
 
 // import {SidebarService} from '../sidebar.service';
 import { HtmlAttributesDirective } from '../../shared';
@@ -11,7 +12,6 @@ import { INavData } from './sidebar-nav';
 import { SidebarNavLinkPipe } from './sidebar-nav-link.pipe';
 import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
 import { SidebarNavIconPipe } from './sidebar-nav-icon.pipe';
-import { IconDirective } from '@coreui/icons-angular';
 
 @Component({
   selector: 'c-sidebar-nav-link-content',
@@ -40,12 +40,12 @@ export class SidebarNavLinkContentComponent {
     RouterModule,
     HtmlAttributesDirective,
     IconDirective,
-    NgClass,
-    NgTemplateOutlet,
     SidebarNavLinkContentComponent,
     SidebarNavLinkPipe,
     SidebarNavBadgePipe,
-    SidebarNavIconPipe
+    SidebarNavIconPipe,
+    NgTemplateOutlet,
+    NgClass
   ]
 })
 export class SidebarNavLinkComponent implements OnInit, OnDestroy {

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.html

@@ -8,6 +8,7 @@
         [ngClass]="item | cSidebarNavItemClass"
         [routerLinkActiveOptions]="{exact: true}"
         routerLinkActive="show"
+        [compact]="compact"
       />
     }
     @case ('divider') {
@@ -42,4 +43,4 @@
     }
   }
 }
-<ng-content />
+<ng-content></ng-content>

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav.component.ts

@@ -1,6 +1,7 @@
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
 import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
+  booleanAttribute,
   Component,
   ElementRef,
   forwardRef,
@@ -80,6 +81,7 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
   @Input() item: any;
   @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
   @Input() show?: boolean;
+  @Input({ transform: booleanAttribute }) compact?: boolean;
 
   @HostBinding('class')
   get hostClasses(): any {
@@ -204,21 +206,22 @@ export class SidebarNavComponent implements OnChanges {
 
   @Input() navItems?: INavData[] = [];
   @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
-  @Input() groupItems?: boolean;
-  @Input() compact?: boolean;
+  @Input({ transform: booleanAttribute }) groupItems?: boolean;
+  @Input({ transform: booleanAttribute }) compact?: boolean;
 
   @HostBinding('class')
   get hostClasses(): any {
     return {
       'sidebar-nav': !this.groupItems,
-      compact: !this.groupItems && !!this.compact
+      'nav-group-items': this.groupItems,
+      compact: this.groupItems && this.compact
     };
   }
 
-  @HostBinding('class.nav-group-items')
-  get sidebarNavGroupItemsClass(): boolean {
-    return !!this.groupItems;
-  }
+  // @HostBinding('class.nav-group-items')
+  // get sidebarNavGroupItemsClass(): boolean {
+  //   return !!this.groupItems;
+  // }
 
   @HostBinding('attr.role') role = 'nav';
 

projects/coreui-angular/src/lib/sidebar/sidebar-toggler/sidebar-toggler.component.ts

@@ -0,0 +1,25 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+import { SidebarToggleDirective } from '../sidebar-toggle/sidebar-toggle.directive';
+
+@Directive({
+  selector: '[cSidebarToggler]',
+  standalone: true,
+  hostDirectives: [{ directive: SidebarToggleDirective, inputs: ['cSidebarToggle: cSidebarToggler', 'toggle'] }]
+})
+export class SidebarTogglerDirective {
+
+  @HostBinding('attr.role')
+  @Input() role = 'button';
+
+  @HostBinding('class.sidebar-toggler') sidebarTogglerClass = true;
+
+  @HostBinding('style')
+  get getStyles(): any {
+    return {
+      appearance: 'button',
+      'align-items': 'flex-start',
+      cursor: 'pointer'
+    };
+  }
+
+}