fix(sidebar-nav): add missing dropdownMode

- `path`: close inactive sidebar-nav-group on active route change only
- `close`: close open sidebar-nav-group on other group click
- `none`: keep sidebar-nav-group open

Author: xidedix

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

@@ -1,17 +1,18 @@
-<a class="nav-link nav-group-toggle"
-   href
-   (click)="toggleGroup($event)"
-   [cHtmlAttr]="item.attributes">
+<a (click)="toggleGroup($event)"
+   [cHtmlAttr]="item.attributes"
+   class="nav-link nav-group-toggle"
+   href>
   <ng-container *ngTemplateOutlet="iconTemplate ; context: {$implicit: item}"></ng-container>
   <ng-container>{{ item.name }}</ng-container>
   <span *ngIf="helper.hasBadge(item)" [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
 </a>
 <c-sidebar-nav
+  (@openClose.done)="onAnimationDone($event)"
+  (@openClose.start)="onAnimationStart($event)"
+  [@openClose]="open ? 'open' : 'closed'"
+  [dropdownMode]="dropdownMode"
   [groupItems]="true"
   [navItems]="navItems"
-  [@openClose]="open ? 'open' : 'closed'"
-  (@openClose.start)="onAnimationStart($event)"
-  (@openClose.done)="onAnimationDone($event)"
   [ngStyle]="display"
 >
 </c-sidebar-nav>
@@ -21,8 +22,8 @@
   <ng-template [ngIf]="item?.iconComponent">
     <svg
       [cIcon]="item.iconComponent?.content"
-      [name]="item.iconComponent?.name"
       [customClasses]="item | cSidebarNavIcon"
+      [name]="item.iconComponent?.name"
     ></svg>
   </ng-template>
   <span *ngIf="!item?.icon && !item?.iconComponent" [ngClass]="item | cSidebarNavIcon"></span>

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SidebarNavGroupService } from './sidebar-nav-group.service';
+
+describe('SidebarNavGroupService', () => {
+  let service: SidebarNavGroupService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SidebarNavGroupService]
+    });
+    service = TestBed.inject(SidebarNavGroupService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-group.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+import { SidebarNavGroupComponent } from './sidebar-nav.component';
+
+export interface ISidebarAction {
+  open?: boolean;
+  sidebarNavGroup?: SidebarNavGroupComponent;
+}
+
+@Injectable()
+export class SidebarNavGroupService {
+
+  constructor() { }
+
+  private sidebarNavGroupState = new BehaviorSubject<ISidebarAction>({});
+  sidebarNavGroupState$ = this.sidebarNavGroupState.asObservable();
+
+  toggle(action: ISidebarAction): void {
+    this.sidebarNavGroupState.next(action);
+  }
+}

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

@@ -1,25 +1,26 @@
 <ng-container *ngFor="let item of navItemsArray">
   <ng-container [ngSwitch]="helper.itemType(item)">
     <c-sidebar-nav-group
+      #rla="routerLinkActive"
       *ngSwitchCase="'group'"
+      [dropdownMode]="dropdownMode"
       [item]="item"
       [ngClass]="item | cSidebarNavItemClass"
-      routerLinkActive="show"
-      #rla="routerLinkActive"
       [routerLinkActiveOptions]="{exact: true}"
+      routerLinkActive="show"
     >
     </c-sidebar-nav-group>
     <c-sidebar-nav-divider
       *ngSwitchCase="'divider'"
+      [cHtmlAttr]="item.attributes ?? {}"
       [item]="item"
-      [ngClass]="item | cSidebarNavItemClass"
-      [cHtmlAttr]="item.attributes ?? {}">
+      [ngClass]="item | cSidebarNavItemClass">
     </c-sidebar-nav-divider>
     <c-sidebar-nav-title
       *ngSwitchCase="'title'"
+      [cHtmlAttr]="item.attributes ?? {}"
       [item]="item"
-      [ngClass]="item | cSidebarNavItemClass"
-      [cHtmlAttr]="item.attributes ?? {}">
+      [ngClass]="item | cSidebarNavItemClass">
     </c-sidebar-nav-title>
     <c-sidebar-nav-label
       *ngSwitchCase="'label'"
@@ -30,10 +31,10 @@
       *ngSwitchCase="'empty'">
     </ng-container>
     <c-sidebar-nav-link
+      (linkClick)="hideMobile()"
       *ngSwitchDefault
       [item]="item"
       [ngClass]="item | cSidebarNavItemClass"
-      (linkClick)="hideMobile()"
     >
     </c-sidebar-nav-link>
   </ng-container>

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

@@ -8,7 +8,8 @@ import {
   OnInit,
   Optional,
   Renderer2,
-  SimpleChanges
+  SimpleChanges,
+  ViewChild
 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 
@@ -19,15 +20,26 @@ import { SidebarComponent } from '../sidebar/sidebar.component';
 import { Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
+import { SidebarNavGroupService } from './sidebar-nav-group.service';
 
 @Component({
   selector: 'c-sidebar-nav',
   templateUrl: './sidebar-nav.component.html',
   styleUrls: ['./sidebar-nav.component.scss']
 })
 export class SidebarNavComponent implements OnChanges {
+
+  constructor(
+    @Optional() public sidebar: SidebarComponent,
+    public helper: SidebarNavHelper,
+    public router: Router,
+    private renderer: Renderer2,
+    private hostElement: ElementRef,
+    private sidebarService: SidebarService
+  ) { }
+
   @Input() navItems?: INavData[] = [];
-  @Input() dropdownMode?: 'closeInactive' | 'noAction' | 'openActive' = 'closeInactive';
+  @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
   @Input() groupItems?: boolean;
   @Input() compact?: boolean;
 
@@ -48,15 +60,6 @@ export class SidebarNavComponent implements OnChanges {
 
   public navItemsArray: INavData[] = [];
 
-  constructor(
-    @Optional() public sidebar: SidebarComponent,
-    public helper: SidebarNavHelper,
-    public router: Router,
-    private renderer: Renderer2,
-    private hostElement: ElementRef,
-    private sidebarService: SidebarService
-  ) { }
-
   public ngOnChanges(changes: SimpleChanges): void {
     this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];
   }
@@ -89,53 +92,61 @@ export class SidebarNavComponent implements OnChanges {
   ]
 })
 export class SidebarNavGroupComponent implements OnInit, OnDestroy {
+
+  constructor(
+    private router: Router,
+    private renderer: Renderer2,
+    private hostElement: ElementRef,
+    public helper: SidebarNavHelper,
+    private sidebarNavGroupService: SidebarNavGroupService
+  ) {
+    this.navigationEndObservable = router.events.pipe(
+      filter((event: any) => event instanceof NavigationEnd)
+    ) as Observable<NavigationEnd>;
+  }
+
   @Input() item: any;
-  @Input() dropdownMode: 'closeInactive' | 'noAction' | 'openActive' = 'closeInactive';
-  // @ts-ignore
-  @Input() show: boolean;
+  @Input() dropdownMode: 'path' | 'none' | 'close' = 'path';
+  @Input() show?: boolean;
 
   @HostBinding('class')
-  // tslint:disable-next-line:typedef
   get hostClasses(): any {
     return {
       'nav-group': true,
       show: this.open
     };
   }
 
-  // todo: dropdownMode
+  @ViewChild(SidebarNavComponent, { read: ElementRef }) sidebarNav!: ElementRef;
 
   navigationEndObservable: Observable<NavigationEnd>;
-  // @ts-ignore
-  navSubscription: Subscription;
+  navSubscription!: Subscription;
+  navGroupSubscription!: Subscription;
 
-  // @ts-ignore
-  public open: boolean;
+  public open!: boolean;
   public navItems: INavData[] = [];
   public display: any = { display: 'block' };
 
-  constructor(
-    private router: Router,
-    public helper: SidebarNavHelper,
-    private hostElement: ElementRef
-  ) {
-    this.navigationEndObservable = router.events.pipe(
-      filter((event: any) => event instanceof NavigationEnd)
-    ) as Observable<NavigationEnd>;
-  }
-
   ngOnInit(): void {
 
     this.navItems = [...this.item.children];
 
     this.navSubscription = this.navigationEndObservable.subscribe((event: NavigationEnd) => {
-      const samePath = this.samePath(event.url);
-      this.openGroup(samePath);
+      if (this.dropdownMode !== 'none') {
+        const samePath = this.samePath(event.url);
+        this.openGroup(samePath);
+      }
     });
 
     if (this.samePath(this.router.routerState.snapshot.url)) {
       this.openGroup(true);
     }
+
+    this.navGroupSubscription = this.sidebarNavGroupService.sidebarNavGroupState$.subscribe(next => {
+      if (this.dropdownMode === 'close' && next.sidebarNavGroup && next.sidebarNavGroup !== this) {
+        this.openGroup(false);
+      }
+    });
   }
 
   samePath(url: string): boolean {
@@ -154,17 +165,22 @@ export class SidebarNavGroupComponent implements OnInit, OnDestroy {
 
   toggleGroup($event: any): void {
     $event.preventDefault();
-    this.open = !this.open;
+    this.openGroup(!this.open);
+    if (this.open) {
+      this.sidebarNavGroupService.toggle({ open: this.open, sidebarNavGroup: this });
+    }
   }
 
   ngOnDestroy(): void {
     this.navSubscription.unsubscribe();
   }
 
   onAnimationStart($event: AnimationEvent) {
-    setTimeout(() => {
-      this.display = { display: 'block' };
-    });
+    this.display = { display: 'block' };
+    if ($event.toState === 'open') {
+      const host = this.sidebarNav.nativeElement;
+      this.renderer.setStyle(host, 'height', `${host['scrollHeight']}px`);
+    }
   }
 
   onAnimationDone($event: AnimationEvent) {

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

@@ -11,6 +11,7 @@ import { SidebarToggleDirective } from './sidebar-toggle/sidebar-toggle.directiv
 import { SidebarTogglerComponent } from './sidebar-toggler/sidebar-toggler.component';
 import { SidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
+import { SidebarNavGroupService } from './sidebar-nav/sidebar-nav-group.service';
 
 import { SharedModule } from '../shared';
 
@@ -30,6 +31,7 @@ import {
 } from './sidebar-nav';
 
 
+
 @NgModule({
   declarations: [
     SidebarComponent,
@@ -68,7 +70,8 @@ import {
   ],
   providers: [
     SidebarService,
-    SidebarNavHelper
+    SidebarNavHelper,
+    SidebarNavGroupService
   ],
 })
 export class SidebarModule { }