Add header not finish

package-lock.json

@@ -434,6 +434,14 @@
       "resolved": "https://registry.npmjs.org/@angular/fire/-/fire-5.1.3.tgz",
       "integrity": "sha512-s9tdSDS0ZLWKax5atMSxpJWehQ59bKgbzy8uZJVo1vyJw/eshBduuCZbETBj6RmwWhKgrBfgS2odNwKxArE25w=="
     },
+    "@angular/flex-layout": {
+      "version": "7.0.0-beta.24",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-7.0.0-beta.24.tgz",
+      "integrity": "sha512-ll6sK0nLGxqI/f5+z4jbd+pve1QITzgehv2AuGvfSDgIjPMeqUDB5YZqQmIGM/dQRk/vIio5KCW5LQPJWzMMYQ==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/forms": {
       "version": "7.2.15",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-7.2.15.tgz",

package.json

@@ -13,11 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~7.2.0",
-    "@angular/cdk": "~7.3.7",
+    "@angular/cdk": "^7.3.7",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/fire": "^5.1.3",
+    "@angular/flex-layout": "^7.0.0-beta.24",
     "@angular/forms": "~7.2.0",
     "@angular/material": "^7.3.7",
     "@angular/platform-browser": "~7.2.0",
@@ -26,12 +27,12 @@
     "core-js": "^2.5.4",
     "firebase": "^6.0.2",
     "hammerjs": "^2.0.8",
-    "rxjs": "~6.3.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.8.26",
     "js-sha512": "latest",
     "moment": "latest",
-    "stacktrace-js": "latest"
+    "rxjs": "~6.3.3",
+    "stacktrace-js": "latest",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.13.0",

src/app/app-material.module.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatSelectModule } from '@angular/material/select';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule( {
   exports: [
@@ -24,6 +25,7 @@ import { MatSelectModule } from '@angular/material/select';
     MatNativeDateModule,
     MatSelectModule,
     MatTooltipModule,
+    FlexLayoutModule,
   ]
 } )
 export class AppMaterialModule {

src/app/app.module.ts

@@ -1,19 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { ErrorHandler, NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
 import { HomeComponent } from './home/home.component';
+import { HeaderComponent } from './header/header.component';
 
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from '@app/app-routing.module';
 import { AngularFireModule } from '@angular/fire';
 import { AngularFireDatabaseModule } from '@angular/fire/database';
-import { environment } from '@env/environment';
-import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service';
-import { LogService, SEOService } from '@app/core/services';
 import { AppMaterialModule } from '@app/app-material.module';
-import { AppRoutingModule } from '@app/app-routing.module';
+
-import { HeaderComponent } from './header/header.component';
+import { LogService, SEOService } from '@app/core/services';
+import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service';
+
+import { environment } from '@env/environment';
 
 @NgModule({
   declarations: [

src/app/header/header.component.css

@@ -0,0 +1,47 @@
+header {
+  width: 100%;
+  height: 60px;
+  background-color: #FFF;
+  box-shadow: 0 0 8px rgba(0, 0, 0, .4);
+}
+
+header #header-container-desktop {
+  max-width: 1280px;
+  margin: auto;
+  height: 100%;
+  padding: 0 10px;
+}
+
+header .title {
+  cursor: pointer;
+  line-height: 50px;
+  font-size: 36px;
+  letter-spacing: 0.1em;
+  font-family: 'Lobster', cursive, "Helvetica Neue", HelveticaNeue-Light, "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
+  background-color: #078171;
+  text-align: center;
+  margin: 5px 0;
+  border-radius: 10px;
+}
+
+header .title a {
+  color: #FFF;
+  text-decoration: none;
+}
+
+header .icons-container {
+  text-align: right;
+}
+
+header .account-button {
+  height: 50px;
+  width: 50px;
+  margin: 5px 0;
+  background-color: #078171;
+}
+
+header .account-button span {
+  padding: 0;
+  margin: 0;
+  line-height: 50px;
+}

src/app/header/header.component.html

@@ -1,3 +1,47 @@
-<p>
+<header>
-  header works!
+
-</p>
+  <div id="header-container-desktop" fxLayout="row" fxLayoutAlign="space-between" fxShow
+       fxHide.lt-md="true">
+
+    <div fxFlex="200px" class="title">
+      <a [routerLink]="">DiscoTrip</a>
+    </div>
+    <div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
+
+      <div fxFlex="60px">
+        <button mat-fab class="account-button">
+          <mat-icon>local_airport</mat-icon>
+        </button>
+      </div>
+
+      <div fxFlex="60px">
+        <button mat-fab class="account-button">
+          <mat-icon>person</mat-icon>
+        </button>
+      </div>
+      <div fxFlex="50px">
+        <!-- Search input -->
+      </div>
+
+    </div>
+
+  </div>
+
+  <div id="header-container-mobile" fxLayout="row" fxLayoutAlign="space-between" fxShow
+       fxHide.gt-sm="true">
+
+    <button mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
+      <mat-icon style="transform: scale(1.3)">menu</mat-icon>
+    </button>
+
+    <div fxFlex="100%">
+
+      <div class="title" style="width: 200px;margin: 5px auto;">
+        <a [routerLink]="">DiscoTrip</a>
+      </div>
+
+    </div>
+
+  </div>
+
+</header>

src/app/header/header.component.ts

@@ -3,11 +3,12 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+  styleUrls: [ './header.component.css' ]
 })
 export class HeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
   }

src/app/home/home.component.html

@@ -1,3 +1 @@
-<app-header>
+<app-header></app-header>
-  Test
-</app-header>

src/index.html

@@ -10,6 +10,7 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
 
 </head>
 

src/styles.css

@@ -1,4 +1,19 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+html, body {
+  height: 100%;
+  background-color: #f2f2f2;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+/* For specific CSS */
+app-header .mat-fab .mat-button-wrapper {
+  line-height: normal;
+  padding: 0;
+}