From 895a3c2fd622c6e1b0b32bbaf007ec8aa29add0c Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Tue, 10 Mar 2020 22:19:34 +0800
Subject: [PATCH] feat: init url

---
 src/app/app.component.html                    | 14 +++++++++++++
 src/app/app.component.scss                    |  3 +++
 src/app/app.module.ts                         |  4 +++-
 src/app/presentation/home/home.component.html |  4 ----
 src/app/shared/custom-material.module.ts      | 21 +++++++++++++++++++
 5 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/app/shared/custom-material.module.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0680b43f..e5f0498b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,15 @@
+<mat-toolbar color="accent">
+    <mat-toolbar-row>
+        <button mat-button routerLink="/home" routerLinkActive="active">DevOps</button>
+        <span class="spacer"></span>
+        <div class="right">
+            <button mat-button>案例学习</button>
+            <button mat-button>模式与原则</button>
+            <button mat-button>设计 DevOps</button>
+            <button mat-button>最佳实践</button>
+            <button mat-button>操作手册</button>
+        </div>
+    </mat-toolbar-row>
+</mat-toolbar>
+
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29b..d0ca4ccb 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +1,3 @@
+.spacer {
+  flex: 1 1 auto;
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index defc2e9d..1aabd1ed 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { AppWikiComponent } from './features/app-wiki/app-wiki.component';
 import { HttpClientModule } from '@angular/common/http';
 import { HomeComponent } from './presentation/home/home.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CustomMaterialModule } from './shared/custom-material.module';
 
 @NgModule({
   declarations: [
@@ -33,7 +34,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    CustomMaterialModule,
   ],
   providers: [Title],
   bootstrap: [AppComponent]
diff --git a/src/app/presentation/home/home.component.html b/src/app/presentation/home/home.component.html
index 577447d0..cd571176 100644
--- a/src/app/presentation/home/home.component.html
+++ b/src/app/presentation/home/home.component.html
@@ -1,8 +1,4 @@
-<!--The content below is only a placeholder and can be replaced.-->
 <div class="container">
-<!--    <app-selection-bar-->
-<!--            (highlightElement)="highlightElement($event)"-->
-<!--            [currentAtomCategory]="category"></app-selection-bar>-->
     <app-periodic-table
             [selectedMetal]="highlightState"
             (currentAtomCategory)="setCurrentAtomCategory($event)"></app-periodic-table>
diff --git a/src/app/shared/custom-material.module.ts b/src/app/shared/custom-material.module.ts
new file mode 100644
index 00000000..843f0b4f
--- /dev/null
+++ b/src/app/shared/custom-material.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+
+const modules = [
+  MatToolbarModule,
+  MatButtonModule,
+  MatMenuModule
+];
+
+@NgModule({
+  imports: modules,
+  declarations: [],
+  providers: [
+  ],
+  exports: modules,
+  entryComponents: []
+})
+export class CustomMaterialModule {
+}