extract generic layout with blue and white themes

src/app/shared/layout/layout.component.html

+<div id="layout">
+  <app-navbar [links]="links" [theme]="theme"></app-navbar>
+  <main class="content">
+   <router-outlet (deactivate)="onDeactivate()"></router-outlet>
+  </main>
+  <app-footer></app-footer>
+</div>

src/app/shared/layout/layout.component.scss

+/*
+Sticky footer solution from
+https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+*/
+#layout {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+/* Make main content expand to pull footer to the bottom */
+.content {
+  flex: 1;
+}

src/app/shared/layout/layout.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/layout/layout.component.ts

+import { Component, Input, Renderer } from '@angular/core';
+ import { Link } from '../nav.model';
+
+
+ @Component({
+   selector: 'app-layout',
+   templateUrl: './layout.component.html',
+   styleUrls: ['./layout.component.scss']
+ })
+ export class LayoutComponent {
+
+   @Input() links: Link[];
+   @Input() theme: string;
+
+   constructor(private renderer: Renderer) {
+     this.links = [];
+   }
+
+   onDeactivate() {
+     // on page reload, scroll to top of window
+     this.renderer.setElementProperty(document.body, 'scrollTop', 0);
+   }
+
+ }

src/app/shared/nav-group/nav-group.component.html

-<ul>
+<ul [ngClass]="{'vertical': vertical}">
   <li *ngFor="let link of links">
-    <app-nav-item [link]="link"></app-nav-item>
+    <app-nav-item [link]="link" [theme]="theme"></app-nav-item>
   </li>
 </ul>

src/app/shared/nav-group/nav-group.component.scss

@@ -4,6 +4,10 @@ ul {
   padding: 0;
   display: flex;
 
+  &.vertical {
+    flex-direction: column;
+  }
+
   li {
     text-align: center;
   }

src/app/shared/nav-group/nav-group.component.ts

@@ -9,5 +9,7 @@ import { Link } from '../nav.model';
 export class NavGroupComponent {
 
   @Input() links: Link[];
+  @Input() theme: string;
+  @Input() vertical = false;
 
 }

src/app/shared/nav-item/nav-item.component.html

-<div class="nav-link">
+<div class="nav-link" [ngClass]="{'blue': theme === 'blue'}">
   <a *ngIf="link.href; else action" class="no-style" [routerLink]="link.href">
     {{ link.text }}
   </a>

src/app/shared/nav-item/nav-item.component.scss

@@ -17,4 +17,14 @@
     color: $color-dark-blue;
     border-color: $color-dark-blue;
   }
+
+  &.blue {
+    color: $color-purple-light;
+    &:hover {
+      &:hover {
+        color: $color-light-gray;
+        border-color: $color-light-gray;
+      }
+    }
+  }
 }

src/app/shared/nav-item/nav-item.component.ts

@@ -9,5 +9,6 @@ import { Link } from '../nav.model';
 export class NavItemComponent {
 
   @Input() link: Link;
+  @Input() theme: string;
 
 }

src/app/shared/navbar/navbar.component.html

-<div class="navbar drop-shadow-md">
+<div class="navbar drop-shadow-md" [ngClass]="{'blue': theme === 'blue'}">
   <div class="top">
     <a routerLink="/" class='logo-container'>
-      <img src='assets/img/oser-logo.png' alt='Logo' class='logo'>
+      <span [ngSwitch]="theme">
+        <img *ngSwitchCase="'blue'" src='assets/img/oser-logo-white.png' alt='Logo' class='logo'>
+        <img *ngSwitchDefault src='assets/img/oser-logo.png' alt='Logo' class='logo'>
+      </span>
     </a>
     <div class="nav-wide">
-      <app-nav-group [links]="links"></app-nav-group>
+      <app-nav-group [theme]="theme" [links]="links"></app-nav-group>
       <ng-content select="[app-navbar-extra]"></ng-content>
     </div>
     <i (click)="toggle()" class="hamburger fa fa-bars fa-2x"></i>
   </div>
   <div class="nav-narrow" *ngIf="visible">
-    <app-nav-group-vertical [links]="links" (click)="toggle()"></app-nav-group-vertical>
+    <app-nav-group [links]="links" [vertical]="true" [theme]="theme" (click)="toggle()"></app-nav-group>
     <ng-content select="[app-navbar-extra-narrow]"></ng-content>
   </div>
 </div>

src/app/shared/navbar/navbar.component.scss

@@ -9,6 +9,12 @@ $col-padding: 10px;
   padding: 0 $margin-page;
   margin: 0;
   background: white;
+  &.blue {
+    background: $color-dark-blue;
+    i.hamburger {
+      color: white !important;
+    }
+  }
   z-index: 10;
   display: flex;
   flex-flow: column nowrap;

src/app/shared/navbar/navbar.component.ts

@@ -11,6 +11,7 @@ export class NavbarComponent {
 
   visible = false;
   @Input() links: Link[] = [];
+  @Input() theme: string;
 
   constructor() { }
 

src/app/shared/shared.module.ts

@@ -14,11 +14,10 @@ import { RevealComponent } from './reveal/reveal.component';
 import { FilterComponent } from './filter/filter.component';
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { NavGroupComponent } from './nav-group/nav-group.component';
-import { NavGroupVerticalComponent } from './nav-group-vertical/nav-group-vertical.component';
-import { BlueNavbarComponent } from './blue_navbar/blue_navbar.component';
 import { MailtoComponent } from './mailto/mailto.component';
 import { LoginButtonComponent } from './login-button/login-button.component';
 import { FormPageComponent } from './form-page/form-page.component';
+import { LayoutComponent } from './layout/layout.component';
 
 @NgModule({
   imports: [
@@ -37,11 +36,10 @@ import { FormPageComponent } from './form-page/form-page.component';
     FilterComponent,
     NavItemComponent,
     NavGroupComponent,
-    NavGroupVerticalComponent,
-    BlueNavbarComponent,
     MailtoComponent,
     LoginButtonComponent,
     FormPageComponent,
+    LayoutComponent,
   ],
   exports: [
     NavbarComponent,
@@ -50,11 +48,10 @@ import { FormPageComponent } from './form-page/form-page.component';
     RevealComponent,
     FilterComponent,
     NavGroupComponent,
-    NavGroupVerticalComponent,
-    BlueNavbarComponent,
     MailtoComponent,
     LoginButtonComponent,
     FormPageComponent,
+    LayoutComponent,
   ]
 })
 export class SharedModule { }

src/app/showcase-site/showcase-site.component.html

-<span id="top"></span>
-<div id="showcase-site">
-  <app-navbar [links]="navLinks">
-    <app-login-button app-navbar-extra class="login-link"></app-login-button>
-    <app-login-button app-navbar-extra-narrow class="text-center login-link"></app-login-button>
-  </app-navbar>
-  <main class="content">
-    <router-outlet (deactivate)="onDeactivate()"></router-outlet>
-  </main>
-  <app-footer></app-footer>
-</div>
+<app-layout [links]="navLinks"></app-layout>

src/app/showcase-site/showcase-site.component.scss

-/*
-Sticky footer solution from
-https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
-*/
-#showcase-site {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-/* Make main content expand to pull footer to the bottom */
-.content {
-  flex: 1;
-}
-
-.login-link {
-  display: block;
-  margin: auto 0;
-  padding: 1em 0;
-}

src/app/showcase-site/showcase-site.component.ts

-import { Component, OnInit, Renderer } from '@angular/core';
+import { Component } from '@angular/core';
 import { Link } from 'app/shared';
 
 @Component({
@@ -6,9 +6,7 @@ import { Link } from 'app/shared';
   templateUrl: './showcase-site.component.html',
   styleUrls: ['./showcase-site.component.scss']
 })
-export class ShowcaseSiteComponent implements OnInit {
-
-  constructor(private renderer: Renderer) { }
+export class ShowcaseSiteComponent {
 
   navLinks: Link[] = [
     { href: '/qui-sommes-nous', text: 'Qui sommes-nous ?' },
@@ -18,11 +16,4 @@ export class ShowcaseSiteComponent implements OnInit {
     { href: '/contact', text: 'Contact' }
   ];
 
-  ngOnInit() { }
-
-  onDeactivate() {
-    // on page reload, scroll to top of window
-    this.renderer.setElementProperty(document.body, "scrollTop", 0);
-  }
-
 }