Initial commit

package-lock.json

@@ -115,6 +115,14 @@
         "tslib": "1.9.1"
       }
     },
+    "@angular/cdk": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.0.tgz",
+      "integrity": "sha512-K5GMMxsIJOETwX9lE9rDz/Fg7EiacZnJP3/nN1cElZ9fmf1eKna/gxICMpKL3uy/VDik8DvH98J8DUKgj6CoNA==",
+      "requires": {
+        "tslib": "1.9.1"
+      }
+    },
     "@angular/cli": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.0.5.tgz",
@@ -343,6 +351,14 @@
       "integrity": "sha512-yeEMS8GwEhyMKD4nlzg/0Ug56k5Zb58uShjVlh+kr6WWHMRzAtecvNHePlakPjxyWzf/EIDWnMJV31HGOGQYZg==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.0.tgz",
+      "integrity": "sha512-4vC2Ycrf1ORP6iGIy9qExVpbjqHJ/ObEQd72pVDQyK127O8cxhGhEiX8QvxdeAGREVxqwfhUGEK/vjH3o110fQ==",
+      "requires": {
+        "tslib": "1.9.1"
+      }
+    },
     "@angular/platform-browser": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.3.tgz",
@@ -4305,6 +4321,11 @@
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",

package.json

@@ -11,16 +11,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.0.0",
+    "@angular/animations": "^6.0.3",
+    "@angular/cdk": "^6.2.0",
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
+    "@angular/material": "^6.2.0",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/router": "^6.0.0",
     "core-js": "^2.5.4",
+    "hammerjs": "^2.0.8",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },

src/app/app-material.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MatToolbarModule } from '@angular/material/toolbar';
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTabsModule } from '@angular/material/tabs';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatCardModule,
+    MatTableModule,
+    MatFormFieldModule
+  ],
+  exports: [
+    MatToolbarModule,
+    MatFormFieldModule,
+    MatTableModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTabsModule,
+    MatCardModule
+  ]
+})
+export class AppMaterialModule { }

src/app/app.component.css

@@ -0,0 +1,37 @@
+.logo {
+  font-style: oblique;
+  letter-spacing: 1px;
+}
+
+nav {
+  margin-left: 26px;
+}
+
+.nav_header {
+  list-style-type: none;
+  overflow: hidden;
+  /* padding: 0; */
+}
+
+.nav_header li {
+  float: left;
+}
+
+li a {
+  display: block;
+  padding: 8px 14px;
+  color: white;
+  text-decoration: none;
+}
+
+li a:hover {
+  background: #424242;
+}
+.demo-tab-content {
+  color: white;
+  padding: 16px;
+}
+.container {
+  margin: 2em auto;
+  width: 70%;
+}

src/app/app.component.html

@@ -1,20 +1,42 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
+<mat-toolbar color="primary">
+  <mat-toolbar-row>
+    <span class="logo">ACE Inventory Managment</span>
+    <nav>
+      <ul class="nav_header">
         <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
+          <a href="#">Home</a>
         </li>
         <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
+          <a href="#">Products</a>
         </li>
         <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
+          <a href="#">Add Product</a>
+        </li>
+        <li>
+          <a href="#">LogIn</a>
         </li>
       </ul>
-
+    </nav>
+  </mat-toolbar-row>
+</mat-toolbar>
+<div class="container">
+  <mat-card>
+    <mat-tab-group>
+      <mat-tab label="About">
+        <div class="demo-tab-content">
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
+          text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
+          book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
+          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+          and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+        </div>
+      </mat-tab>
+      <mat-tab label="Dashboard">
+        <div class="demo-tab-content">
+          Content 2
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card>
+</div>

src/app/app.module.ts

@@ -1,5 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppMaterialModule } from './app-material.module';
 
 import { AppComponent } from './app.component';
 
@@ -8,7 +10,9 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    AppMaterialModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/main.ts

@@ -3,6 +3,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import 'hammerjs';
 
 if (environment.production) {
   enableProdMode();

src/styles.css

@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
+* {
+  margin: 0;
+}
+body {
+  background: #212121;
+  box-sizing: border-box;
+}