feat(notes): add drawer to display notes in

src/app/app.component.html

@@ -1,25 +1,19 @@
-<main-header></main-header>
-<!--<bookmark-bar *ngIf="bookmarkService.isShowBookmarks$|async"-->
-<!--[@slide]="{value:'r',params:{elHeight: 50}}"></bookmark-bar>-->
+<main-header [drawer]="drawer"></main-header>
 <bookmark-bar *ngIf="bookmarkService.isShowBookmarks$|async"
               [@expand]></bookmark-bar>
 <add-task-bar class="global"
               [@blendInOut]
               (blur)="layoutService.hideAddTaskBar()"
               *ngIf="layoutService.isShowAddTaskBar$|async"></add-task-bar>
-<mat-sidenav-container>
-  <mat-sidenav-content>
-    <div class="route-wrapper"
-         [@warpRoute]="getPage(o)">
-      <router-outlet #o="outlet"></router-outlet>
-    </div>
-    <div style="width: 20%; min-width: 200px; border-left: 1px solid blue; position: absolute; right: 0;top: 0;bottom: 0; z-index: 10; background: #eeeeee;" class="">
-
-
-    </div>
-  </mat-sidenav-content>
-  <mat-sidenav>
+<mat-drawer-container autosize>
+  <div class="route-wrapper"
+       [@warpRoute]="getPage(o)">
+    <router-outlet #o="outlet"></router-outlet>
+  </div>
+  <mat-drawer #drawer
+              position="end"
+              mode="side">
     TEST
-  </mat-sidenav>
+  </mat-drawer>
 
-</mat-sidenav-container>
+</mat-drawer-container>

src/app/app.component.scss

@@ -11,6 +11,7 @@ app-root,
   color: #e0e0e0;
 }
 
+mat-drawer-container,
 mat-sidenav-container {
   //height: calc(100% - #{$main-header-height});
   height: 100%;

src/app/main-header/main-header.component.html

@@ -42,6 +42,13 @@
             [color]="rlHA.isActive ? 'accent' : null">
       <mat-icon>today</mat-icon>
     </button>
+
+    <button mat-mini-fab
+            (click)="drawer.toggle()"
+            [color]="drawer.opened ? 'accent' : null">
+      <mat-icon>note</mat-icon>
+    </button>
+
     <eco-fab-speed-dial [(open)]="isSpeedDialOpen"
                         (mouseenter)="isSpeedDialOpen = true"
                         (mouseleave)="isSpeedDialOpen = false"

src/app/main-header/main-header.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnInit } from '@angular/core';
 import { ProjectService } from '../project/project.service';
 import { DialogCreateProjectComponent } from '../project/dialogs/create-project/dialog-create-project.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog, MatDrawer } from '@angular/material';
 import { LayoutService } from '../core/layout/layout.service';
 import { BookmarkService } from '../bookmark/bookmark.service';
 
@@ -13,6 +13,8 @@ import { BookmarkService } from '../bookmark/bookmark.service';
 export class MainHeaderComponent implements OnInit {
   isSpeedDialOpen: boolean;
 
+  @Input() drawer: MatDrawer;
+
   constructor(
     public readonly projectService: ProjectService,
     public readonly bookmarkService: BookmarkService,

src/app/note/store/note.reducer.ts

@@ -1,5 +1,5 @@
 import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
-import { Note } from './note.model';
+import { Note } from '../note.model';
 import { NoteActions, NoteActionTypes } from './note.actions';
 
 export interface State extends EntityState<Note> {