Added menu component

src/app/app.component.html

@@ -1,4 +1,3 @@
 <app-header></app-header>
 <app-content></app-content>
-<app-menu></app-menu>
-<router-outlet></router-outlet>
+<app-menu></app-menu>

src/app/layouts/content/content.component.html

@@ -1,2 +1,3 @@
 <div class="content-body">
+  <router-outlet></router-outlet>
 </div>

src/app/layouts/content/content.component.scss

@@ -3,4 +3,6 @@
 .content-body {
     height:100%;
     background-color: $hima-content-color;
+    padding-top: 100px;
+    padding-left: 12px;
 }

src/app/layouts/header/header.component.html

@@ -1,7 +1,9 @@
 <div class="app-header">
   <div class="three-col-grid-container mx-8">
     <div class="align-left">
-      <img src="/assets/images/hugendubel.jpg">
+      <a routerLink="/dashboard">
+        <img src="/assets/images/hugendubel.jpg">
+      </a>
     </div>
     <div class="align-center">
       <div class="two-col-grid-container pt-5">

src/app/layouts/menu/menu.component.html

@@ -1,10 +1,10 @@
 <div class="menu">
   <div class="menu-grid">
-    <div class="menu-item-grid align-center">
+    <div class="menu-item-grid align-center" (click)="routeToMenu('/article-search', 'articlesearch')">
       <div>
-        <img class="menu-icon" src="/assets/images/search_book_active.svg">
+        <img class="menu-icon" src="/assets/images/search_book_inactive.svg">
       </div>
-      <span class="menu-item selected">Artikelsuche</span>
+      <span class="menu-item">Artikelsuche</span>
     </div>
     <div class="menu-item-grid align-center">
       <div>

src/app/layouts/menu/menu.component.scss

@@ -17,6 +17,7 @@
 .menu-item-grid {
     display: grid;
     grid-template-columns: auto;
+    outline: none;
 }
 
 .menu-item {

src/app/layouts/menu/menu.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-menu',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MenuComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
+  activeMenu = '';
+
+  routeToMenu(menuPath: string, menuTag: string): void {
+    this.activeMenu = menuTag;
+    this.router.navigate([menuPath]);
+  }
 
   ngOnInit() {
   }
-
 }

src/app/modules/layouts/layouts.module.ts

@@ -4,22 +4,30 @@ import { ProcessHeaderComponent } from 'src/app/layouts/process-header/process-h
 import { ProcessTabComponent } from 'src/app/layouts/process-tab/process-tab.component';
 import { CommonModule } from '@angular/common';
 import { ContentComponent } from 'src/app/layouts/content/content.component';
+import { ArticleSearchComponent } from 'src/app/layouts/article-search/article-search.component';
+import { DashboardComponent } from 'src/app/layouts/dashboard/dashboard.component';
+import { AppRoutingModule } from 'src/app/app-routing.module';
 
 @NgModule({
   declarations: [
     HeaderComponent,
     ProcessHeaderComponent,
     ProcessTabComponent,
-    ContentComponent
+    ContentComponent,
+    ArticleSearchComponent,
+    DashboardComponent
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    AppRoutingModule
   ],
   exports: [
     HeaderComponent,
     ProcessHeaderComponent,
     ProcessTabComponent,
-    ContentComponent
+    ContentComponent,
+    ArticleSearchComponent,
+    DashboardComponent
   ]
 })
 export class LayoutsModule { }

src/assets/scss/_variables.scss

@@ -1,5 +1,5 @@
 /* constants declaration */
 $color-active: #4F6575;
 $color-inactive: #b4cde4; //#C4E0F5;
-$hima-content-color: #e6faff;
+$hima-content-color: #ccf5ff;
 $hima-color-red: #EA0000;