Angular Rest install and dashboard layout

Author: sandershihacker

.npmrc

@@ -0,0 +1 @@
+@maxxton:registry=https://npm.maxxton.com

package.json

@@ -22,6 +22,7 @@
     "@angular/platform-browser": "^2.3.1",
     "@angular/platform-browser-dynamic": "^2.3.1",
     "@angular/router": "^3.3.1",
+    "@maxxton/angular-rest": "^1.0.0",
     "angular-rest": "^0.1.2",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",

src/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="root-page">
 
   <!-- Toolbar -->
-  <md-toolbar>
+  <md-toolbar id="splash-nav">
     <a routerLink="/" class="logo-section"><span>{{title}}</span></a>
     <span class="spacer"></span>
     <div class="title-buttons">
@@ -17,7 +17,7 @@
   </div>
 
   <!--Footer-->
-  <div class="footer">
+  <div class="footer" id="splash-footer">
     <div class="footer-top">
       <div class="wrapper">
         <a name="contact"></a>

src/app/app.component.ts

@@ -6,6 +6,6 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 
-export class AppComponent {
+export class AppComponent{
   title = 'OpenChirp';
 }

src/app/dashboard/dashboard.component.html

@@ -1,3 +1,11 @@
 <div class="dashboard">
-  
+    <md-toolbar>
+        {{title}} Dashboard
+        <div class="toolbar-content">
+            {{username}}
+        </div>
+    </md-toolbar>
+    <div class="sidenav">
+        
+    </div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -0,0 +1,26 @@
+$dashboard-toolbar-color: #424242;
+$background-color: #efefef;
+$side-nav-color: #2c3e50;
+.dashboard {
+    md-toolbar {
+        background-color: $dashboard-toolbar-color;
+        color: $background-color;
+        position: fixed;
+        top:0;
+        left: 0;
+        z-index: 999;
+        .toolbar-content {
+            text-align: right;
+            width: 100%;
+        }
+    }
+    .sidenav {
+        position: fixed;
+        width: 240px;
+        height: 100vh;
+        background-color: $side-nav-color;
+        top:0;
+        left: 0;
+        z-index: 998;
+    }
+}

src/app/dashboard/dashboard.component.ts

@@ -10,4 +10,9 @@ import { Http, Request, Response } from '@angular/http';
 
 export class DashboardComponent {
   title = 'OpenChirp';
+  username = "John Doe";
+  constructor() {
+    document.getElementById("splash-nav").style.display = "none";
+    document.getElementById("splash-footer").style.display = "none";
+  }
 }