Add layout design

Break layout-container into useable components

Author: FawzyMokhtar

e2e/src/app.e2e-spec.ts

@@ -1,16 +1,16 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
+import { AppPage } from "./app.po";
+import { browser, logging } from "protractor";
 
-describe('workspace-project App', () => {
+describe("workspace-project App", () => {
   let page: AppPage;
 
   beforeEach(() => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it("should display welcome message", () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to documentation-website!');
+    expect(page.getTitleText()).toEqual("Welcome to documentation-website!");
   });
 
   afterEach(async () => {

e2e/src/app.po.ts

@@ -1,11 +1,11 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element } from "protractor";
 
 export class AppPage {
-  navigateTo() {
+  public navigateTo() {
     return browser.get(browser.baseUrl) as Promise<any>;
   }
 
-  getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
+  public getTitleText() {
+    return element(by.css("app-root h1")).getText() as Promise<string>;
   }
 }

package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~8.2.0",
     "@angular/platform-browser-dynamic": "~8.2.0",
     "@angular/router": "~8.2.0",
+    "bootstrap": "^4.3.1",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
@@ -30,9 +31,9 @@
     "@angular/cli": "~8.2.0",
     "@angular/compiler-cli": "~8.2.0",
     "@angular/language-service": "~8.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
@@ -46,4 +47,4 @@
     "tslint": "~5.15.0",
     "typescript": "~3.5.3"
   }
-}
+}

src/app/main/components/footer/footer.component.html

@@ -0,0 +1,21 @@
+<div class="row footer">
+    <div class="col-12 footer-links">
+        <nav class="navbar">
+            <div class="nav-item">
+                <a class="nav-link section-title">Docs</a>
+                <a routerLink="/" class="nav-link">Getting Started</a>
+            </div>
+            <div class="nav-item">
+                <a class="nav-link section-title">Community</a>
+                <a routerLink="/" class="nav-link">Stack Overflow</a>
+            </div>
+            <div class="nav-item">
+                <a class="nav-link section-title">More</a>
+                <a routerLink="/" class="nav-link">GitHub</a>
+            </div>
+        </nav>
+    </div>
+    <div class="col-12 footer-copy-right">
+        Copyright &copy; 2019 DotNet Validator
+    </div>
+</div>

src/app/main/components/footer/footer.component.sass

@@ -0,0 +1,9 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-footer",
+  templateUrl: "./footer.component.html",
+  styleUrls: ["./footer.component.sass"]
+})
+export class FooterComponent {
+}

src/app/main/components/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { TopNavComponent } from "../components/top-nav/top-nav.component";
+import { SideNavComponent } from "../components/side-nav/side-nav.component";
+import { PostComponent } from "../components/post/post.component";
+import { NavigatorComponent } from "../components/navigator/navigator.component";
+import { SectionNavComponent } from "../components/section-nav/section-nav.component";
+import { FooterComponent } from "../components/footer/footer.component";
+
+export const COMPONENTS: any[] = [
+    TopNavComponent,
+    SideNavComponent,
+    PostComponent,
+    NavigatorComponent,
+    SectionNavComponent,
+    FooterComponent
+];

src/app/main/components/index.ts

@@ -0,0 +1,10 @@
+<div class="doc-prev-next">
+    <a class="doc-prev" routerLink="/">
+        <span>← </span>
+        <span>Previous</span>
+    </a>
+    <a class="doc-next" routerLink="/">
+        <span>Next</span>
+        <span> →</span>
+    </a>
+</div>

src/app/main/components/navigator/navigator.component.html

@@ -0,0 +1,9 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-navigator",
+  templateUrl: "./navigator.component.html",
+  styleUrls: ["./navigator.component.sass"]
+})
+export class NavigatorComponent {
+}