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>

Frontend/src/styles.css

@@ -1,9 +1,123 @@
-/* You can add global styles to this file, and also import other style files */
-body {
-    margin: 0;
-    font-family: sans-serif;
-    margin-bottom: 10em;
+* {
+    font-family: 'Roboto', Arial, sans-serif;
+    color: #616161;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+}
+
+router-outlet + *  {
+    padding: 0 16px;
+}
+
+/* Text */
+
+h1 {
+    font-size: 32px;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+h1, h2 {
+    font-weight: lighter;
+}
+
+p {
+    font-size: 14px;
+}
+
+/* Hyperlink */
+
+a {
+    cursor: pointer;
+    color: #1976d2;
+    text-decoration: none;
+}
+
+a:hover {
+    opacity: 0.8;
+}
+
+/* Input */
+
+input {
+    font-size: 14px;
+    border-radius: 2px;
+    padding: 8px;
+    margin-bottom: 16px;
+    border: 1px solid #BDBDBD;
+}
+
+label {
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 4px;
+    display: block;
+    text-transform: uppercase;
+}
+
+/* Button */
+.button, button {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 16px;
+    border-radius: 2px;
+    font-size: 14px;
+    cursor: pointer;
+    background-color: #1976d2;
+    color: white;
+    border: none;
+}
+
+.button:hover, button:hover {
+    opacity: 0.8;
+    font-weight: normal;
+}
+
+.button:disabled, button:disabled {
+    opacity: 0.5;
+    cursor: auto;
+}
+
+/* Fancy Button */
+
+.fancy-button {
+    background-color: white;
+    color: #1976d2;
+}
+
+.fancy-button i.material-icons {
+    color: #1976d2;
+    padding-right: 4px;
+}
+
+/* Top Bar */
+
+app-top-bar {
+    width: 100%;
+    height: 68px;
+    background-color: #1976d2;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)
+}
+
+app-top-bar h1 {
+    color: white;
+    margin: 0;
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }