Reimplement plugin tab component to work with nested groups and displ…

…ay icons

src/app/app-routing.module.ts

@@ -31,6 +31,8 @@ const routes: Routes = [
     { path: 'settings', component: SettingsPageComponent },
     { path: 'extra/:templateTabId', component: PluginTabComponent },
     { path: 'extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
+    { path: 'extra/:path/:templateTabId', component: PluginTabComponent },
+    { path: 'extra/:path/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
     { path: 'experiments', component: ExperimentsPageComponent },
     { path: 'experiments/:experimentId', redirectTo: "info" },
     { path: 'experiments/:experimentId/info', component: ExperimentComponent },
@@ -43,6 +45,8 @@ const routes: Routes = [
     { path: 'experiments/:experimentId/timeline/:step/:stepTabId', component: TimelineStepComponent },
     { path: 'experiments/:experimentId/extra/:templateTabId', component: PluginTabComponent },
     { path: 'experiments/:experimentId/extra/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
+    { path: 'experiments/:experimentId/extra/:path/:templateTabId', component: PluginTabComponent },
+    { path: 'experiments/:experimentId/extra/:path/:templateTabId/plugin/:pluginId', component: PluginTabComponent },
 ];
 
 @NgModule({

src/app/components/plugin-tab/plugin-tab.component.html

@@ -1,10 +1,40 @@
-<nav mat-tab-nav-bar class="big-nav-tabs" *ngIf="plugins.length > 1">
-    <a mat-tab-link
-        [routerLink]="['/experiments', currentExperimentId, 'extra', currentTabId, 'plugin', plugin.resourceKey?.pluginId]"
-        [queryParamsHandling]="'preserve'" [active]="plugin.resourceKey?.pluginId === currentPluginId"
-        *ngFor="let plugin of plugins">
-        {{plugin.name}}
-    </a>
-</nav>
-<qhana-plugin-uiframe class="plugin-frame" [url]="activePluginFrontendUrl" *ngIf="activePluginFrontendUrl != null">
-</qhana-plugin-uiframe>
+<ng-container *ngFor="let navTabBar of navigationTabs">
+    <nav mat-tab-nav-bar class="big-nav-tabs" [tabPanel]="panel">
+        <a mat-tab-link
+            [routerLink]="navTabLinkPrefix.concat(navTab.link)"
+            [queryParamsHandling]="'preserve'" [active]="navTab.tabId === currentTabId || currentPath?.startsWith(navTab.path)"
+            *ngFor="let navTab of navTabBar">
+            <span class="link-label">
+                <mat-icon *ngIf="navTab.icon">
+                    {{navTab.icon}}
+                </mat-icon>
+                {{navTab.name}}
+                <mat-icon *ngIf="navTab.isGroup">more_vert</mat-icon>
+            </span>
+        </a>
+    </nav>
+    <mat-tab-nav-panel #panel></mat-tab-nav-panel>
+</ng-container>
+<ng-container *ngIf="navigationTabs.length === 0 && (currentPluginGroup?.collectionSize ?? 0) > 1 && (currentPluginGroup?.collectionSize ?? 0) < 6">
+    <nav mat-tab-nav-bar class="big-nav-tabs" [tabPanel]="pluginsPanel">
+        <a mat-tab-link
+            [routerLink]="navTabLinkPrefix.concat(currentPath ? [currentPath] : []).concat([currentTabId ?? '-1', 'plugin', plugin.resourceKey?.pluginId ?? '-1'])"
+            [queryParamsHandling]="'preserve'" [active]="plugin.resourceKey?.pluginId === currentPluginId || plugin.resourceKey?.pluginId === activePlugin?.resourceKey?.pluginId"
+            *ngFor="let plugin of currentPluginGroup?.items">
+            {{plugin.name}}
+        </a>
+    </nav>
+    <mat-tab-nav-panel #pluginsPanel></mat-tab-nav-panel>
+</ng-container>
+<div class="main-content">
+    <mat-card class="sidebar" *ngIf="currentPluginGroup && ((currentPluginGroup?.collectionSize ?? 0) >= 6 || (navigationTabs.length > 0 && (currentPluginGroup?.collectionSize ?? 0) > 1))">
+        <mat-card-header class="sidebar-header t-title">Plugins</mat-card-header>
+        <mat-card-content class="sidebar-content-wrapper">
+            <qhana-growing-list class="sidebar-content scrollable" [apiLink]="currentPluginGroup.self"
+                [highlighted]="highlightedPlugin" [highlightByKey]="'pluginId'"
+                (clickItem)="selectPlugin($event)"></qhana-growing-list>
+        </mat-card-content>
+    </mat-card>
+    <qhana-plugin-uiframe class="plugin-frame" [url]="activePluginFrontendUrl" *ngIf="activePluginFrontendUrl != null">
+    </qhana-plugin-uiframe>
+</div>

src/app/components/plugin-tab/plugin-tab.component.sass

@@ -1,10 +1,60 @@
 .big-nav-tabs
-    border-color: var(--border-color)
+    --mdc-tab-indicator-active-indicator-color: var(--primary-text)
+    --mat-tab-header-active-label-text-color: var(--primary-text)
+    --mat-tab-header-active-ripple-color: var(--primary-text)
+    --mat-tab-header-inactive-ripple-color: var(--primary-text)
+    --mat-tab-header-active-focus-label-text-color: var(--primary-text)
+    --mat-tab-header-active-hover-label-text-color: var(--primary-text)
+    --mat-tab-header-active-focus-indicator-color: var(--primary-text)
+    --mat-tab-header-active-hover-indicator-color: var(--primary-text)
+    border-block-end: 1px solid var(--border-color)
 
 .big-nav-tabs a
     color: var(--text)
 
+.link-label
+    display: inline-flex
+    align-items: center
+    gap: 0.3rem
+
+.main-content
+    display: flex
+    flex-direction: row
+    width: 100%
+
+.sidebar
+    position: sticky
+    top: 1rem
+    margin-block: 1rem
+    margin-inline: 1rem
+    min-width: 15rem
+    width: 25vw
+    max-width: 22rem
+    max-height: calc( 100vh - 2rem )
+
+.sidebar-header
+    padding-block: 1rem
+    height: 2rem
+
+.sidebar-content-wrapper
+    margin-inline: -16px
+    margin-block-end: -16px
+    height: calc(100% - 4rem)
+
+.sidebar-content
+    display: block
+    box-sizing: border-box
+    padding-inline: 16px
+    padding-block-end: 1rem
+    height: 100%
+    overflow-y: auto
+    scrollbar-width: thin
+
+.sidebar-content ::ng-deep > ul
+    margin-inline: -16px
+
 .plugin-frame
+    flex-grow: 1
     display: flex
     flex-direction: column
     min-height: 50vh