feat(sidenav): add sidenav component

projects/geo-context/src/lib/geo-context.module.ts

@@ -1,13 +1,21 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 
 import { IgoContextModule } from './context/context.module';
+import { IgoContextMapButtonModule } from './context-map-button/context-map-button.module';
 import { IgoShareMapModule } from './share-map/share-map.module';
+import { IgoSidenavModule } from './sidenav/sidenav.module';
 import { IgoToolModule } from './tool/tool.module';
 
 @NgModule({
   imports: [],
   declarations: [],
-  exports: [IgoContextModule, IgoShareMapModule, IgoToolModule]
+  exports: [
+    IgoContextModule,
+    IgoContextMapButtonModule,
+    IgoShareMapModule,
+    IgoSidenavModule,
+    IgoToolModule
+  ]
 })
 export class IgoGeoContextModule {
   static forRoot(): ModuleWithProviders {

projects/geo-context/src/lib/sidenav/index.ts

@@ -0,0 +1 @@
+export * from './sidenav.component';

projects/geo-context/src/lib/sidenav/sidenav.component.html

@@ -0,0 +1,88 @@
+<mat-sidenav
+  #sidenav
+  igoSidenavShim
+  mode="side"
+  [opened]="opened">
+
+  <div class="igo-sidenav-content">
+
+    <igo-flexible
+      #topPanel
+      initial="50%" initialMobile="100%"
+      expanded="calc(100% - 58px)"
+      [state]="topPanelState">
+
+      <div class="igo-content">
+        <igo-panel [title]="tool ? (tool.title | translate) : 'IGO'">
+          <button
+            mat-icon-button
+            panelLeftButton
+            tooltip-position="below"
+            matTooltipShowDelay="500"
+            [matTooltip]="'igo.geoContext.sidenav.goBack' | translate"
+            (click)="toolService.selectPreviousTool()"
+            *ngIf="tool">
+            <mat-icon>arrow_back</mat-icon>
+          </button>
+
+          <button
+            mat-icon-button
+            panelRightButton
+            tooltip-position="below"
+            matTooltipShowDelay="500"
+            [matTooltip]="'igo.geoContext.sidenav.mainMenu' | translate"
+            (click)="toolService.unselectTool()"
+            *ngIf="tool">
+            <mat-icon>menu</mat-icon>
+          </button>
+
+          <igo-toolbar
+            igoToolContext igoToolbarBinding
+            [withTitle]="tool ? false : true">
+          </igo-toolbar>
+
+          <div class="igo-toolbox-container" [ngClass]="{'shown': tool ? true : false}">
+            <igo-toolbox [animate]="true"></igo-toolbox>
+          </div>
+        </igo-panel>
+      </div>
+
+      <div igoFlexibleFill class="igo-content">
+        <igo-panel
+          [title]="feature.title"
+          *ngIf="feature && media !== 'mobile'">
+
+          <button
+            mat-icon-button
+            panelLeftButton
+            class="igo-icon-button"
+            (click)="toggleTopPanel()">
+            <mat-icon>
+              <ng-container *ngIf="['collapsed', 'initial'].indexOf(topPanel.state) >= 0">
+                arrow_downward
+              </ng-container>
+              <ng-container *ngIf="topPanel.state === 'expanded'">
+                arrow_upward
+              </ng-container>
+            </mat-icon>
+          </button>
+
+          <button
+            mat-icon-button
+            panelRightButton
+            class="igo-icon-button"
+            *ngIf="media !== 'mobile'">
+            <mat-icon>open_in_new</mat-icon>
+          </button>
+
+          <igo-feature-details
+            [feature]="feature"
+            *ngIf="['collapsed', 'initial'].indexOf(topPanel.state) >= 0">
+          </igo-feature-details>
+        </igo-panel>
+      </div>
+
+    </igo-flexible>
+
+  </div>
+</mat-sidenav>

projects/geo-context/src/lib/sidenav/sidenav.component.scss

@@ -0,0 +1,116 @@
+@import '../../../../core/src/style/partial/media';
+@import '../../../../core/src/style/partial/core.variables';
+
+$igo-border-width: 1px;
+$igo-border-style: solid;
+$igo-border-color: rgba(0, 0, 0, .2);
+
+%border-box {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+%bordered {
+  border-width: $igo-border-width;
+  border-style: $igo-border-style;
+  border-color: $igo-border-color;
+}
+
+%bordered-top {
+  border-top-width: $igo-border-width;
+  border-top-style: $igo-border-style;
+  border-top-color: $igo-border-color;
+}
+
+%box-shadowed {
+  -moz-box-shadow: 2px 0px 2px 0px #dddddd;
+  -webkit-box-shadow: 2px 0px 2px 0px #dddddd;
+  -o-box-shadow: 2px 0px 2px 0px #dddddd;
+  box-shadow: 2px 0px 2px 0px #dddddd;
+}
+
+/*** Sidenav ***/
+
+$igo-sidenav-margin-top: 50px;
+$igo-sidenav-width: 400px;
+$igo-mobile-min-space-left: 40px;
+
+:host {
+  background-color: rgb(255, 255, 255);
+}
+
+// This is needed because whe using the
+// sidenav "side" mode, the z-index is 1
+// and the sidenav appears below our backdrop.
+// The "side" mode is required to prevent
+// the sidenav from focusing a random button on open.
+:host ::ng-deep mat-sidenav {
+  z-index: 3 !important;
+}
+
+mat-sidenav {
+  width: $igo-sidenav-width;
+
+  @include mobile {
+    width: calc(100% - #{$igo-mobile-min-space-left} - #{$igo-margin});
+  }
+
+  @extend %box-shadowed;
+}
+
+.igo-sidenav-content {
+  margin-top: $igo-sidenav-margin-top;
+  height: calc(100% - #{$igo-sidenav-margin-top});
+}
+
+.igo-sidenav-content .igo-flexible-fill .igo-container {
+  @extend %bordered-top;
+  @extend %border-box;
+}
+
+/*** Toolbar and toolbox ***/
+
+igo-toolbar {
+  position: absolute;
+  top: 51px;
+  left: 0;
+  bottom: 0;
+}
+
+igo-toolbar.with-title {
+  right: 0;
+  overflow: auto;
+}
+
+igo-toolbar:not(.with-title) {
+  @extend %box-shadowed;
+  overflow: hidden;
+}
+
+igo-toolbar ::ng-deep igo-list {
+  overflow: inherit;
+}
+
+.igo-toolbox-container {
+  position: absolute;
+  top: 51px;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+}
+
+.igo-toolbox-container.shown {
+  left: 48px;
+}
+
+/*** Feature details ***/
+
+:host ::ng-deep .igo-flexible-fill .igo-container {
+  @extend %bordered-top;
+  @extend %border-box;
+}
+
+igo-feature-details ::ng-deep table {
+  width: 100%;
+}

projects/geo-context/src/lib/sidenav/sidenav.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input } from '@angular/core';
+
+import { Media } from '@igo2/core';
+import { FlexibleState } from '@igo2/common';
+import { Feature } from '@igo2/geo';
+import { Tool } from '../tool/shared/tool.interface';
+import { ToolService } from '../tool/shared/tool.service';
+
+@Component({
+  selector: 'igo-sidenav',
+  templateUrl: './sidenav.component.html',
+  styleUrls: ['./sidenav.component.scss']
+})
+export class SidenavComponent {
+  @Input()
+  get opened(): boolean {
+    return this._opened;
+  }
+  set opened(value: boolean) {
+    this._opened = value;
+  }
+  private _opened: boolean;
+
+  @Input()
+  get feature(): Feature {
+    return this._feature;
+  }
+  set feature(value: Feature) {
+    this._feature = value;
+  }
+  private _feature: Feature;
+
+  @Input()
+  get tool(): Tool {
+    return this._tool;
+  }
+  set tool(value: Tool) {
+    this._tool = value;
+  }
+  private _tool: Tool;
+
+  @Input()
+  get media(): Media {
+    return this._media;
+  }
+  set media(value: Media) {
+    this._media = value;
+  }
+  private _media: Media;
+
+  public topPanelState: FlexibleState = 'initial';
+
+  constructor(public toolService: ToolService) {}
+
+  toggleTopPanel() {
+    if (this.topPanelState === 'initial') {
+      this.topPanelState = 'expanded';
+    } else {
+      this.topPanelState = 'initial';
+    }
+  }
+}

projects/geo-context/src/lib/sidenav/sidenav.module.ts

@@ -0,0 +1,41 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MatIconModule,
+  MatButtonModule,
+  MatSidenavModule,
+  MatTooltipModule
+} from '@angular/material';
+
+import { IgoLanguageModule } from '@igo2/core';
+import { IgoPanelModule, IgoFlexibleModule } from '@igo2/common';
+import { IgoFeatureModule } from '@igo2/geo';
+
+import { IgoContextModule } from '../context/context.module';
+import { IgoToolModule } from '../tool/tool.module';
+import { SidenavComponent } from './sidenav.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatTooltipModule,
+    IgoLanguageModule,
+    IgoPanelModule,
+    IgoFlexibleModule,
+    IgoFeatureModule,
+    IgoContextModule,
+    IgoToolModule
+  ],
+  exports: [SidenavComponent],
+  declarations: [SidenavComponent]
+})
+export class IgoSidenavModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: IgoSidenavModule
+    };
+  }
+}