Adds top toolbar

This commit is contained in:
Aaron Louie 2020-09-22 14:41:14 -04:00
parent 6a81c96c12
commit b75126779a
4 changed files with 16 additions and 5 deletions

View File

@ -62,4 +62,4 @@ $brand-green-light: #B5D9A3;
// Dimensions
$easeDuration: 300ms;
$animationDuration: 500ms;
$header-height: 84px;
$header-height: 64px;

View File

@ -1,10 +1,9 @@
<div class="mat-typography">
<app-navbar (userChanged)="reload()"></app-navbar>
<app-navbar></app-navbar>
<router-outlet *ngIf="!loading; else loadingMessage"></router-outlet>
<app-footer></app-footer>
</div>
<ng-template #loadingMessage>
<app-loading></app-loading>
</ng-template>

View File

@ -3,8 +3,11 @@ import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatToolbarModule} from '@angular/material/toolbar';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormlyModule} from '@ngx-formly/core';
import {ThisEnvironment} from '../environments/environment.injectable';
@ -47,7 +50,11 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
HttpClientModule,
MatProgressSpinnerModule,
ReactiveFormsModule,
AppRoutingModule // <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
AppRoutingModule,
MatToolbarModule,
MatButtonModule,
MatIconModule,
// <-- This line MUST be last (https://angular.io/guide/router#module-import-order-matters)
],
providers: [
{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},

View File

@ -1 +1,6 @@
<p>navbar works!</p>
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button routerLink="/"><mat-icon>home</mat-icon></button>
<button mat-icon-button routerLink="/settings"><mat-icon>settings</mat-icon></button>
</mat-toolbar-row>
</mat-toolbar>