first commit

src/app/nav/nav.component.html

@@ -0,0 +1,42 @@
+<mat-sidenav-container class="sidenav-container">
+  <mat-sidenav #drawer class="sidenav" fixedInViewport
+      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+      [mode]="(isHandset$ | async) ? 'over' : 'side'"
+      [opened]="(isHandset$ | async) === false">
+    <!--<mat-toolbar>Menu</mat-toolbar>-->
+    <mat-nav-list>
+      <a mat-list-item routerLink="home"><mat-icon>home</mat-icon>Home</a>
+      <a mat-list-item routerLink="trail"><mat-icon>directions_walk</mat-icon>Trails</a>
+      <a mat-list-item routerLink="plant"><mat-icon>local_florist</mat-icon>Plants</a>
+      <a mat-list-item routerLink="map"><mat-icon>map</mat-icon>Map</a>
+      <a mat-list-item routerLink="settings"><mat-icon>settings</mat-icon>Settings</a>
+      <!--<a mat-list-item routerLink="admin" class='admin'><mat-icon>settings</mat-icon>Admin</a>-->
+      <!--<a mat-list-item routerLink="about"><mat-icon>info</mat-icon>About</a>-->
+      <!--
+      <hr/>
+      <a mat-list-item [routerLink]="trail.id" *ngFor="let trail of dataService.trails">{{ trail.properties.name }}</a>
+      -->
+      <div class="qrcode">
+        Share this site:
+        <img src="assets/img/site-url.png">
+      </div>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content style="display: flex; flex-direction: column">
+    <mat-toolbar>
+      <button
+        type="button"
+        matTooltip="Toggle sidenav"
+        mat-icon-button
+        (click)="drawer.toggle()"
+        *ngIf="isHandset$ | async">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <div class="appTitle">
+        <div class="title">{{ (configService.conf | async).bootstrap?.app.title }}</div>
+      </div>
+      <app-message></app-message>
+    </mat-toolbar>
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>

src/app/nav/nav.component.scss

@@ -0,0 +1,98 @@
+.sidenav-container {
+  height: 100%;
+}
+
+.sidenav {
+  width: 150px;
+}
+
+.sidenav {
+  background-color:rgba(250, 255, 220);
+}
+
+.mat-drawer-container {
+  background-color: inherit;
+}
+
+.mat-toolbar.mat-primary {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.mat-toolbar {
+  padding: 0;
+  height: 2em;
+}
+
+.mat-toolbar .appTitle {
+  font-family: TenderLeaf;
+  font-style: italic;
+  font-weight: lighter;
+  font-variant-caps: petite-caps;
+  text-shadow: 5px 3px 5px #3e371c81;
+  opacity: .9;
+}
+
+.mat-toolbar app-message {
+  padding: 1em;
+}
+
+.mat-icon {
+  padding-right: 0.5em;
+  vertical-align: bottom;
+}
+
+.mat-toolbar {
+  // Angular build cannot find the asset: removing for now
+  //background-image: url("assets/img/banner.jpg");
+  background-color: #a9b15070;
+  background-size: contain;
+  border-bottom: groove;
+  border-color: rgb(187 210 186 / 70%);
+  font-weight: 700;
+}
+
+.mat-toolbar .mat-icon {
+  vertical-align: baseline;
+}
+
+.appTitle {
+  margin: auto;
+  height: inherit;
+  display: flex;
+  align-items: center
+}
+
+.appTitle img {
+  height: inherit;
+}
+
+.qrcode {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  img {
+    height: 5em;
+  }
+}
+
+:host ::ng-deep {
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+  .mdc-line-ripple {
+    display: none;
+  }
+
+  //.sidenav .mat-drawer-inner-container {
+    //background-image: url('assets/img/sidebar.jpg');
+    //background-position: center;
+  //}
+
+  .mat-sidenav-content > :last-child {
+    overflow: auto;
+    height: inherit;
+  }
+}

src/app/nav/nav.component.spec.ts

@@ -0,0 +1,40 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+import { NavComponent } from './nav.component';
+
+describe('NavComponent', () => {
+  let component: NavComponent;
+  let fixture: ComponentFixture<NavComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [NavComponent],
+      imports: [
+        NoopAnimationsModule,
+        LayoutModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSidenavModule,
+        MatToolbarModule,
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nav/nav.component.ts

@@ -0,0 +1,36 @@
+import { Component, ViewChild,
+  ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
+import { Router, NavigationEnd } from '@angular/router';
+import { MatSidenav } from '@angular/material/sidenav'
+import { Observable } from 'rxjs'
+import { map, shareReplay, withLatestFrom, filter } from 'rxjs/operators'
+
+import { DataService } from '../data.service'
+import { ConfigService } from '../config.service'
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss'],
+})
+export class NavComponent {
+  @ViewChild('drawer') drawer: MatSidenav;
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+    .pipe(
+      map(result => result.matches),
+      shareReplay()
+    )
+
+  constructor(
+    private breakpointObserver: BreakpointObserver,
+    public dataService: DataService,
+    public router: Router,
+    public configService: ConfigService,
+  ) {
+    router.events.pipe(
+      withLatestFrom(this.isHandset$),
+      filter(([a, b]) => b && a instanceof NavigationEnd)
+    ).subscribe(_ => this.drawer.close())
+  }
+}