[ACA-2067] Side navigation - highlight element with children only when not expanded (#880)

* highlight parent element condition

* update test

* e2e

e2e/suites/navigation/sidebar.test.ts

@@ -53,21 +53,21 @@ describe('Sidebar', () => {
   it('My Libraries is automatically selected on expanding File Libraries - [C289900]', async () => {
     await page.clickFileLibraries();
     expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.MY_LIBRARIES);
-    expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(true, 'File Libraries link not active');
+    expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(false, 'File Libraries link is active');
     expect(await sidenav.childIsActive(SIDEBAR_LABELS.MY_LIBRARIES)).toBe(true, 'My Libraries link not active');
   });
 
   it('navigate to Favorite Libraries - [C289902]', async () => {
     await page.goToFavoriteLibraries();
     expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.FAVORITE_LIBRARIES);
-    expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(true, 'File Libraries link not active');
+    expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(false, 'File Libraries link is active');
     expect(await sidenav.childIsActive(SIDEBAR_LABELS.FAVORITE_LIBRARIES)).toBe(true, 'Favorite Libraries link not active');
   });
 
   it('navigate to My Libraries - [C289901]', async () => {
     await page.goToMyLibraries();
     expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.MY_LIBRARIES);
-    expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(true, 'File Libraries link not active');
+    expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(false, 'File Libraries link is active');
     expect(await sidenav.childIsActive(SIDEBAR_LABELS.MY_LIBRARIES)).toBe(true, 'My Libraries link not active');
   });
 

src/app/components/sidenav/sidenav.component.html

@@ -40,18 +40,22 @@
 
                     <ng-container *ngIf="item.children && item.children.length">
                         <mat-expansion-panel
+                            #expansionPanel="matExpansionPanel"
                             [acaExpansionPanel]="item"
                             [expanded]="routerLink.isActive"
                             [@.disabled]="true">
                             <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px">
                                 <mat-panel-title [attr.title]="item.description | translate">
-                                    <mat-icon [color]="routerLink.isActive? 'accent': 'primary'">{{ item.icon }}</mat-icon>
-                                    <span class="item--label item--parent"
+                                    <mat-icon [color]="routerLink.isActive && !expansionPanel.expanded? 'accent': 'primary'">
+                                        {{ item.icon }}
+                                    </mat-icon>
+                                    <span
+                                        class="item--label item--parent"
                                         [ngClass]="{
-                                            'item--active': routerLink.isActive,
-                                            'item--default': !routerLink.isActive
-                                        }">
-                                        {{ item.title | translate }}</span>
+                                            'item--default': !routerLink.isActive && expansionPanel.expanded,
+                                            'item--active': routerLink.isActive && !expansionPanel.expanded
+                                        }"
+                                    >{{ item.title | translate }}</span>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
 

src/app/components/sidenav/sidenav.component.spec.ts

@@ -26,29 +26,53 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { SidenavComponent } from './sidenav.component';
-import { EffectsModule } from '@ngrx/effects';
-import { NodeEffects } from '../../store/effects/node.effects';
 import { AppTestingModule } from '../../testing/app-testing.module';
-import { ExperimentalDirective } from '../../directives/experimental.directive';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { AppExtensionService } from '../../extensions/extension.service';
 
 describe('SidenavComponent', () => {
   let fixture: ComponentFixture<SidenavComponent>;
   let component: SidenavComponent;
+  let extensionService: AppExtensionService;
+  const navbarMock = <any>[
+    {
+      items: [
+        {
+          route: 'route'
+        }
+      ]
+    }
+  ];
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [AppTestingModule, EffectsModule.forRoot([NodeEffects])],
-      declarations: [SidenavComponent, ExperimentalDirective],
+      imports: [MatExpansionModule, AppTestingModule],
+      providers: [AppExtensionService],
+      declarations: [SidenavComponent],
       schemas: [NO_ERRORS_SCHEMA]
     })
       .compileComponents()
       .then(() => {
         fixture = TestBed.createComponent(SidenavComponent);
         component = fixture.componentInstance;
+        extensionService = TestBed.get(AppExtensionService);
+
+        extensionService.navbar = navbarMock;
+
+        fixture.detectChanges();
       });
   }));
 
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
+  it('should set the sidenav data', async(() => {
+    expect(component.groups).toEqual(<any>[
+      {
+        items: [
+          {
+            route: 'route',
+            url: '/route'
+          }
+        ]
+      }
+    ]);
+  }));
 });

src/app/components/sidenav/sidenav.component.theme.scss

@@ -41,6 +41,10 @@
       color: mat-color($foreground, text);
     }
 
+    .item--label {
+      color: mat-color($primary, 0.87);
+    }
+
     .item--active {
       color: mat-color($accent);
     }