BETTERZON-74

simple top-bar has been created.

Frontend/src/app/app.component.html

@@ -1 +1,3 @@
+<app-top-bar></app-top-bar>
+
 <router-outlet></router-outlet>

Frontend/src/app/app.module.ts

@@ -16,10 +16,19 @@ import {NewestPricesListComponent} from './components/newest-prices-list/newest-
 import {FormsModule} from '@angular/forms';
 import {PageNotFoundPageComponent} from './pages/page-not-found-page/page-not-found-page.component';
 import {MatMenuModule} from '@angular/material/menu';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ImprintComponent} from './pages/imprint/imprint.component';
 import {PrivacyComponent} from './pages/privacy/privacy.component';
 import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import { TopBarComponent } from './components/top-bar/top-bar.component';
+import {RouterModule} from "@angular/router";
+import {MatButtonModule} from '@angular/material/button';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatListModule} from '@angular/material/list';
+
 
 // For cookie popup
 const cookieConfig: NgcCookieConsentConfig = {
@@ -73,7 +82,8 @@ const cookieConfig: NgcCookieConsentConfig = {
         NewestPricesListComponent,
         PageNotFoundPageComponent,
         ImprintComponent,
-        PrivacyComponent
+        PrivacyComponent,
+        TopBarComponent
     ],
     imports: [
         BrowserModule,
@@ -83,7 +93,17 @@ const cookieConfig: NgcCookieConsentConfig = {
         FormsModule,
         MatMenuModule,
         BrowserAnimationsModule,
-        NgcCookieConsentModule.forRoot(cookieConfig)
+        NgcCookieConsentModule.forRoot(cookieConfig),
+        MatSlideToggleModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatSidenavModule,
+        MatListModule,
+        MatButtonModule,
+        MatIconModule,
+        RouterModule.forRoot([
+            { path: '', component: LandingpageComponent },
+        ]),
     ],
     providers: [],
     bootstrap: [AppComponent]

Frontend/src/app/components/footer/footer.component.css

@@ -30,5 +30,3 @@
     text-decoration: none;
 }
 
-
-

Frontend/src/app/components/header/header.component.css

@@ -48,3 +48,8 @@
     padding: 10px;
     color: #fff;
 }
+
+.slider {
+    position: relative;
+    margin: auto;
+}

Frontend/src/app/components/header/header.component.html

@@ -7,6 +7,9 @@
         <div class="searchBox">
             <input *ngIf="showSearch===true" type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
         </div>
+        <div class="slider">
+            <mat-slide-toggle color="primary">dark me</mat-slide-toggle>
+        </div>
         <div class="profileIcon">
             <button mat-button [matMenuTriggerFor]="menu">Menu</button>
             <mat-menu #menu="matMenu">

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,4 +1,4 @@
-<app-header [showSearch]="false"></app-header>
+
 <div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">

Frontend/src/app/pages/product-detail-page/product-detail-page.component.html

@@ -1,4 +1,3 @@
-<app-header [showSearch]="true"></app-header>
 <div id="mainComponents">
     <app-product-details [productId]="productId"></app-product-details>
     <app-newest-prices-list [productId]="productId"></app-newest-prices-list>

Frontend/src/app/pages/product-search-page/product-search-page.component.html

@@ -1,6 +1,6 @@
-<app-header [showSearch]="true"></app-header>
 <div id="mainComponents">
     <app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
                       type="search"></app-product-list>
 </div>
+
 <app-footer></app-footer>