Remove header

Add search card
Rename Card-dashboard into card

src/app/app-material.module.ts

@@ -4,13 +4,14 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTableModule } from '@angular/material/table';
-import { MatInputModule, MatNativeDateModule, MatSnackBarModule, MatTooltipModule } from '@angular/material';
+import { MatInputModule, MatListModule, MatNativeDateModule, MatSnackBarModule, MatTooltipModule } from '@angular/material';
 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';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
 
 @NgModule( {
   exports: [
@@ -28,6 +29,8 @@ import { MatMenuModule } from '@angular/material/menu';
     MatTooltipModule,
     FlexLayoutModule,
     MatMenuModule,
+    MatSidenavModule,
+    MatListModule,
   ]
 } )
 export class AppMaterialModule {

src/app/app.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/app.component.html

@@ -1 +1,93 @@
-<router-outlet></router-outlet>
+<mat-sidenav-container [hasBackdrop]="true" style="height: 100%">
+
+  <mat-sidenav #drawer mode="over" role="navigation">
+    <mat-nav-list>
+      <a [matMenuTriggerFor]="profileMenu" mat-list-item>
+        <mat-icon style="padding-right: 20px">person</mat-icon>
+        Account
+      </a>
+      <a [matMenuTriggerFor]="tripMenu" mat-list-item>
+        <mat-icon style="padding-right: 20px">local_airport</mat-icon>
+        Trips
+      </a>
+    </mat-nav-list>
+  </mat-sidenav>
+
+  <mat-menu #tripMenu="matMenu">
+    <button mat-menu-item>My Trips</button>
+    <button mat-menu-item>My Schedule</button>
+  </mat-menu>
+
+  <mat-menu #profileMenu="matMenu">
+    <button mat-menu-item>Login</button>
+    <button mat-menu-item>Create Account</button>
+    <button mat-menu-item>Logout</button>
+  </mat-menu>
+
+  <mat-sidenav-content>
+
+    <header>
+
+      <div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
+           id="header-container-desktop">
+
+        <div class="title" fxFlex="200px">
+          <a [routerLink]="">DiscoTrip</a>
+        </div>
+        <div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
+
+          <div fxFlex="60px">
+
+            <button [matMenuTriggerFor]="tripMenu" class="account-button" mat-fab>
+              <mat-icon>local_airport</mat-icon>
+            </button>
+
+          </div>
+
+          <div fxFlex="60px">
+
+            <button [matMenuTriggerFor]="profileMenu" class="account-button" mat-fab>
+              <mat-icon>person</mat-icon>
+            </button>
+
+          </div>
+
+          <div>
+
+            <mat-form-field appearance="fill">
+              <mat-label>Fill form field</mat-label>
+              <input matInput placeholder="Placeholder">
+              <mat-icon matSuffix>search</mat-icon>
+            </mat-form-field>
+
+          </div>
+
+        </div>
+
+      </div>
+
+      <div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
+           id="header-container-mobile">
+
+        <button (click)="drawer.toggle()" 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>
+
+    <router-outlet></router-outlet>
+
+  </mat-sidenav-content>
+
+</mat-sidenav-container>

src/app/app.module.ts

@@ -2,7 +2,6 @@ import { ErrorHandler, NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
-import { HeaderComponent } from './header/header.component';
 import { RegisterComponent } from './register/register.component';
 
 import { BrowserModule } from '@angular/platform-browser';
@@ -10,29 +9,30 @@ 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 { AngularFireAuthModule } from "@angular/fire/auth";
+import { AngularFireAuthModule } from '@angular/fire/auth';
 import { AppMaterialModule } from '@app/app-material.module';
 
 import { LogService, SEOService } from '@app/core/services';
 import { GlobalErrorHandler } from '@app/core/global-error-handler/global-error-handler.service';
 
 import { environment } from '@env/environment';
-import { CardDashboardComponent } from './card-dashboard/card-dashboard.component';
+import { CardComponent } from './card/card.component';
+import { SearchCardComponent } from './search-card/search-card.component';
 
 @NgModule( {
   declarations: [
     AppComponent,
     HomeComponent,
-    HeaderComponent,
     RegisterComponent,
-    CardDashboardComponent,
+    CardComponent,
+    SearchCardComponent,
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
     AngularFireModule.initializeApp( environment.firebaseConfig ),
-	AngularFireAuthModule,
+    AngularFireAuthModule,
     AngularFireDatabaseModule,
     AppMaterialModule,
   ],

src/app/card/card.component.html

@@ -4,16 +4,14 @@
   <mat-card>
 
     <mat-card-header>
-      <mat-card-title>Shiba Inu</mat-card-title>
+      <mat-card-title>
+        <ng-content select="[title]"></ng-content>
+      </mat-card-title>
     </mat-card-header>
 
     <mat-card-content>
       <p>
-        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from
+        <ng-content select="[desc]"></ng-content>
-        Japan.
-        A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was
-        originally
-        bred for hunting.
       </p>
     </mat-card-content>
 

src/app/card/card.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HeaderComponent } from './header.component';
+import { CardComponent } from './card.component';
 
-describe( 'HeaderComponent', () => {
+describe( 'CardComponent', () => {
-  let component: HeaderComponent;
+  let component: CardComponent;
-  let fixture: ComponentFixture<HeaderComponent>;
+  let fixture: ComponentFixture<CardComponent>;
 
   beforeEach( async( () => {
     TestBed.configureTestingModule( {
-      declarations: [ HeaderComponent ]
+      declarations: [ CardComponent ]
     } )
       .compileComponents();
   } ) );
 
   beforeEach( () => {
-    fixture = TestBed.createComponent( HeaderComponent );
+    fixture = TestBed.createComponent( CardComponent );
     component = fixture.componentInstance;
     fixture.detectChanges();
   } );

src/app/card/card.component.ts

@@ -1,15 +1,19 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 @Component( {
-  selector: 'app-card-dashboard',
+  selector: 'app-card',
-  templateUrl: './card-dashboard.component.html',
+  templateUrl: './card.component.html',
-  styleUrls: [ './card-dashboard.component.css' ]
+  styleUrls: [ './card.component.css' ]
 } )
-export class CardDashboardComponent implements OnInit {
+export class CardComponent implements OnInit {
 
   public matCardClass: string;
+
   @Input() private position: string;
 
+  @Input() public title: string;
+  @Input() public description: any;
+
   constructor() {
   }
 

src/app/header/header.component.css

@@ -1,47 +0,0 @@
-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,69 +0,0 @@
-<header>
-
-  <div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
-       id="header-container-desktop">
-
-    <div class="title" fxFlex="200px">
-      <a [routerLink]="">DiscoTrip</a>
-    </div>
-    <div fxFlex="calc(100% - 200px)" fxLayout="row" fxLayoutAlign="end">
-
-      <div fxFlex="60px">
-
-        <button [matMenuTriggerFor]="tripMenu" class="account-button" mat-fab>
-          <mat-icon>local_airport</mat-icon>
-        </button>
-
-        <mat-menu #tripMenu="matMenu">
-          <button mat-menu-item>My Trips</button>
-          <button mat-menu-item>My Schedule</button>
-        </mat-menu>
-
-      </div>
-
-      <div fxFlex="60px">
-
-        <button [matMenuTriggerFor]="profileMenu" class="account-button" mat-fab>
-          <mat-icon>person</mat-icon>
-        </button>
-
-        <mat-menu #profileMenu="matMenu">
-          <button mat-menu-item>Login</button>
-          <button mat-menu-item>Create Account</button>
-          <button mat-menu-item>Logout</button>
-        </mat-menu>
-
-      </div>
-
-      <div>
-
-        <mat-form-field appearance="fill">
-          <mat-label>Fill form field</mat-label>
-          <input matInput placeholder="Placeholder">
-          <mat-icon matSuffix>search</mat-icon>
-        </mat-form-field>
-
-      </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

@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AuthService } from '@app/core/services/auth/auth.service';
-
-@Component( {
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: [ './header.component.css' ]
-} )
-export class HeaderComponent implements OnInit {
-
-  constructor( private authService: AuthService ) {
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/home/home.component.html

@@ -1,18 +1,17 @@
-<app-header></app-header>
-
 <div class="main-container">
 
   <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="space-between">
 
     <div fxFlex>
 
-      <app-card-dashboard position="first"></app-card-dashboard>
+      <app-search-card position="first"></app-search-card>
+      <!--      <app-card position="first"></app-card>-->
 
     </div>
 
     <div fxFlex>
 
-      <app-card-dashboard position="second"></app-card-dashboard>
+      <!--      <app-card position="second"></app-card>-->
 
     </div>
 

src/app/search-card/search-card.component.html

@@ -0,0 +1,4 @@
+<app-card position="{{ position }}">
+  <div title>Search Your Trip</div>
+  <div desc>Here search bar</div>
+</app-card>

src/app/search-card/search-card.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CardDashboardComponent } from './card-dashboard.component';
+import { SearchCardComponent } from './search-card.component';
 
-describe( 'CardDashboardComponent', () => {
+describe( 'SearchCardComponent', () => {
-  let component: CardDashboardComponent;
+  let component: SearchCardComponent;
-  let fixture: ComponentFixture<CardDashboardComponent>;
+  let fixture: ComponentFixture<SearchCardComponent>;
 
   beforeEach( async( () => {
     TestBed.configureTestingModule( {
-      declarations: [ CardDashboardComponent ]
+      declarations: [ SearchCardComponent ]
     } )
       .compileComponents();
   } ) );
 
   beforeEach( () => {
-    fixture = TestBed.createComponent( CardDashboardComponent );
+    fixture = TestBed.createComponent( SearchCardComponent );
     component = fixture.componentInstance;
     fixture.detectChanges();
   } );

src/app/search-card/search-card.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component( {
+  selector: 'app-search-card',
+  templateUrl: './search-card.component.html',
+  styleUrls: [ './search-card.component.css' ]
+} )
+export class SearchCardComponent implements OnInit {
+
+  @Input() public position: string;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/styles.css

@@ -13,7 +13,7 @@ body {
 }
 
 /* For specific CSS */
-app-header .mat-fab .mat-button-wrapper {
+app-root .mat-fab .mat-button-wrapper {
   line-height: normal;
   padding: 0;
 }
@@ -22,7 +22,6 @@ app-header .mat-fab .mat-button-wrapper {
   max-width: 1280px;
   margin: auto;
   box-sizing: border-box;
-  padding: 0 10px;
   width: 100%;
   min-height: 80%;
 }