feat: init url

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>

src/app/app.component.scss

@@ -0,0 +1,3 @@
+.spacer {
+  flex: 1 1 auto;
+}

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]

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>

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 {
+}