feat(web): add link to tutorial in toolbar

Author: ngfelixl

apps/web/src/app/app.module.ts

@@ -6,7 +6,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
-import { OverviewComponent } from './components/overview/overview.component';
 import { TutorialComponent } from './components/tutorial/tutorial.component';
 import { PlotsService } from './services/plots.service';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -16,12 +15,12 @@ import { PlotsComponent } from './components/plots/plots.component';
 import { SocketService } from './services/socket.service';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   declarations: [
     AppComponent,
     TutorialComponent,
-    OverviewComponent,
     PlotComponent,
     PlotsComponent,
   ],
@@ -36,6 +35,7 @@ import { MatCardModule } from '@angular/material/card';
     MatListModule,
     DragDropModule,
     MatCardModule,
+    MatIconModule,
   ],
   providers: [PlotsService, SocketService],
   bootstrap: [AppComponent],

apps/web/src/app/components/app/app.component.css

@@ -18,10 +18,6 @@ main {
   justify-content: stretch;
 }
 
-:host ::ng-deep .main-router-outlet + * {
-  flex: 1 1 0;
-}
-
 mat-toolbar {
   flex: 0 0 auto;
   justify-content: space-between;

apps/web/src/app/components/app/app.component.html

@@ -1,18 +1,21 @@
 <mat-toolbar color="primary">
-  <span class="brand">
+  <span class="brand" routerLink="/">
     <button mat-flat-button color="primary">NodePlotLib</button>
   </span>
   <span class="info-icons">
-    <a href="https://github.com/ngfelixl/nodeplotlib" target="_blank"
-      ><button mat-icon-button>
-        <img src="/assets/github-light-32px.png" /></button
-    ></a>
+    <button mat-icon-button routerLink="tutorial">
+      <mat-icon>tips_and_updates</mat-icon>
+    </button>
     <a href="https://plotly.com/javascript/" target="_blank"
       ><button mat-icon-button>
         <img src="/assets/plotly.svg" /></button
     ></a>
+    <a href="https://github.com/ngfelixl/nodeplotlib" target="_blank"
+      ><button mat-icon-button>
+        <img src="/assets/github-light-32px.png" /></button
+    ></a>
   </span>
 </mat-toolbar>
 <main>
-  <router-outlet class="main-router-outlet"></router-outlet>
+  <router-outlet></router-outlet>
 </main>