diff options
| author | schencej <55326070+schencej@users.noreply.github.com> | 2019-12-10 17:32:06 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2019-12-10 17:32:06 -0500 |
| commit | 3b8dd74dcb2be88630099772e0902e1dfbcde92c (patch) | |
| tree | f1a10c6a2e092de028810bc842dc11bde2580a49 | |
| parent | 3fd5630cae141bf49537537315d23bdbf92f8493 (diff) | |
| parent | db8efeafb8e3a427cded4ffa1b8fdcda789cbdaa (diff) | |
Merge pull request #21 from tuckerevans/top_bar
Add toolbar to main app template
| -rw-r--r-- | recipeBuddy/src/app/app.component.html | 18 | ||||
| -rw-r--r-- | recipeBuddy/src/app/app.module.ts | 4 |
2 files changed, 20 insertions, 2 deletions
diff --git a/recipeBuddy/src/app/app.component.html b/recipeBuddy/src/app/app.component.html index 014c6b0..830c5cb 100644 --- a/recipeBuddy/src/app/app.component.html +++ b/recipeBuddy/src/app/app.component.html @@ -1,2 +1,18 @@ -<h1>{{title}}</h1> +<mat-toolbar color="primary"> + <span style="margin-left: 15px"> + <button mat-button routerLink="/" routerLinkActive="active"><h1>{{title}}</h1></button> + </span> + <span style="flex: 1 1 auto"></span> + <div style="margin-right: 15px"> + <button mat-icon-button routerLink="/add" routerLinkActive="active"> + <mat-icon style="padding-left: 8px; padding-right: 8px">add</mat-icon> + </button> + <button mat-icon-button routerLink="/cart" routerLinkActive="active"> + <mat-icon style="padding-left: 8px; padding-right: 8px">shopping_cart</mat-icon> + </button> + <button mat-icon-button routerLink="/search" routerLinkActive="active"> + <mat-icon style="padding-left: 8px; padding-right: 8px">search</mat-icon> + </button> + </div> +</mat-toolbar> <router-outlet></router-outlet> diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 4acbaa6..83747b4 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -18,6 +18,7 @@ import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; +import { MatToolbarModule } from '@angular/material/toolbar'; import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; @NgModule({ @@ -37,7 +38,8 @@ import { EditRecipeComponent } from './edit-recipe/edit-recipe.component'; MatInputModule, MatFormFieldModule, MatIconModule, - MatButtonModule + MatButtonModule, + MatToolbarModule ], providers: [], bootstrap: [AppComponent] |