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;
+ }
}