diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8c112e61..63eb09bf 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,6 +29,7 @@ import { MatSortModule } from '@angular/material/sort'; import { MatTableModule } from '@angular/material/table'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatTabsModule } from '@angular/material/tabs'; +import { MatExpansionModule } from '@angular/material/expansion'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -158,6 +159,7 @@ import { LibraryTableComponent } from './components/libraries/library-table/libr MatTableModule, MatCheckboxModule, MatTabsModule, + MatExpansionModule, ], bootstrap: [AppComponent], providers: [ diff --git a/src/app/components/navigation/navigation.component.html b/src/app/components/navigation/navigation.component.html index 7363e4e9..e5ea4509 100644 --- a/src/app/components/navigation/navigation.component.html +++ b/src/app/components/navigation/navigation.component.html @@ -7,92 +7,85 @@ QC Atlas - - + diff --git a/src/app/components/navigation/navigation.component.scss b/src/app/components/navigation/navigation.component.scss index de35e167..630e206c 100644 --- a/src/app/components/navigation/navigation.component.scss +++ b/src/app/components/navigation/navigation.component.scss @@ -22,29 +22,53 @@ top: 0; z-index: 1000; } -.mat-nav-list a.routerLinkActive { - background: rgba(mat-color($qc-atlas-ui-primary), 0.20); + +nav { + padding-block: 0.5rem; + overflow-y: auto; + max-height: calc(100% - 64px); } -.mat-nav-list:hover a.routerLinkActive { - background: rgba(mat-color($qc-atlas-ui-primary), 0.20); + +.nav-link { + min-height: 2rem; + color: initial; + font-size: 16px; + font-weight: 300; } -.mat-nav-list a.routerLinkActive:focus { + +.nav-link:focus, .nav-link:active, .nav-link.active { background: rgba(mat-color($qc-atlas-ui-primary), 0.20); } -.mat-nav-list:hover a:hover { + +.nav-link:hover { background: rgba(mat-color($qc-atlas-ui-primary), 0.10); } -.mat-drawer-side { - border: none; +.mat-expansion-panel.flat-panel { + box-shadow: none; + border-radius: 0px; } -.sub-tab { - font-size: 14px; +// TODO: check styles after angular upgrade! +::ng-deep .mat-expansion-panel .mat-expansion-panel-header { + padding-inline-start: 16px; } -.collapse-arrow-icon { - color: mat-color($qc-atlas-ui-primary); +::ng-deep .mat-expansion-panel .mat-expansion-panel-body { + padding-inline: 0px; +} + +.nav-panel-header { + font-weight: 300; +} + +mat-expansion-panel .nav-link { + padding-inline-start: 24px; +} + + +.mat-drawer-side { + border: none; } .menu-button { diff --git a/src/app/components/navigation/navigation.component.ts b/src/app/components/navigation/navigation.component.ts index eab0262e..c8354d4b 100644 --- a/src/app/components/navigation/navigation.component.ts +++ b/src/app/components/navigation/navigation.component.ts @@ -4,9 +4,10 @@ import { Breakpoints, BreakpointState, } from '@angular/cdk/layout'; -import { Router } from '@angular/router'; +import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { ApiConfiguration } from 'api-atlas/api-configuration'; import { Observable, from } from 'rxjs'; +import { filter } from 'rxjs/operators'; import { QcAtlasUiRepositoryConfigurationService, UiFeatures, @@ -26,9 +27,12 @@ export class NavigationComponent implements OnInit { hideNav = false; bearerTokenSet = false; + activeGroup: 'libraries' | 'execution' | 'components' | null = null; + constructor( private breakpointObserver: BreakpointObserver, private router: Router, + private activeRoute: ActivatedRoute, public configData: QcAtlasUiRepositoryConfigurationService, private config: ApiConfiguration, private utilService: UtilService, @@ -36,6 +40,20 @@ export class NavigationComponent implements OnInit { ) {} ngOnInit(): void { + if (this.activeRoute.firstChild) { + const path = this.activeRoute.firstChild.snapshot.url?.[0]?.path; + this.onUrlChanged(path); + } + + this.router.events + .pipe(filter((event) => event instanceof NavigationEnd)) + .subscribe((event) => { + if (event.url.length < 2) { + this.onUrlChanged(''); + return; + } + this.onUrlChanged(event.url.substring(1)); + }); this.breakpointObserver .observe([Breakpoints.Small, Breakpoints.XSmall]) .subscribe((state: BreakpointState) => { @@ -86,4 +104,34 @@ export class NavigationComponent implements OnInit { .then(() => this.router.navigate(['/algorithms'])) ); } + + private onUrlChanged(newPath: string): void { + if (newPath === '') { + this.activeGroup = null; + return; + } + console.log(newPath); + if (newPath === 'libraries' || newPath === 'slr') { + this.activeGroup = 'libraries'; + return; + } + + if (newPath.startsWith('execution-environments')) { + this.activeGroup = 'execution'; + return; + } + + if ( + newPath.startsWith('problem-types') || + newPath.startsWith('application-areas') || + newPath.startsWith('algorithm-relation-types') || + newPath.startsWith('pattern-relation-types') || + newPath.startsWith('compute-resource-property-types') + ) { + this.activeGroup = 'components'; + return; + } + + this.activeGroup = null; + } }