feat(reDesign): connect menu button

src/app/app.component.html

@@ -20,9 +20,8 @@
          class="route-wrapper">
       <router-outlet #o="outlet"></router-outlet>
     </div>
-    <mat-drawer (closedStart)="noteService.hide()"
-                [mode]="(isSidePanelBp$|async) ? 'over' : 'side'"
-                [opened]="noteService.isShowNotes$|async"
+    <mat-drawer [mode]="(isSidePanelBp$|async) ? 'over' : 'side'"
+                [opened]="layoutService.isShowSideBar$|async"
                 position="start">
       <project-list></project-list>
     </mat-drawer>

src/app/core-ui/layout/layout.service.ts

@@ -1,22 +1,15 @@
 import {Injectable} from '@angular/core';
-import {
-  HideAddTaskBar,
-  HideBookmarkBar,
-  ShowAddTaskBar,
-  ShowBookmarkBar,
-  ToggleAddTaskBar,
-  ToggleBookmarkBar
-} from './store/layout.actions';
+import {HideAddTaskBar, ShowAddTaskBar, ToggleAddTaskBar, ToggleSideBar,} from './store/layout.actions';
 import {Observable} from 'rxjs';
 import {select, Store} from '@ngrx/store';
-import {LayoutState, selectIsShowAddTaskBar, selectIsShowBookmarkBar} from './store/layout.reducer';
+import {LayoutState, selectIsShowAddTaskBar, selectIsShowSideBar} from './store/layout.reducer';
 
 @Injectable({
   providedIn: 'root',
 })
 export class LayoutService {
   isShowAddTaskBar$: Observable<boolean> = this._store$.pipe(select(selectIsShowAddTaskBar));
-  xxxxisShowBookmarkBar$: Observable<boolean> = this._store$.pipe(select(selectIsShowBookmarkBar));
+  isShowSideBar$: Observable<boolean> = this._store$.pipe(select(selectIsShowSideBar));
 
   constructor(private _store$: Store<LayoutState>) {
   }
@@ -33,16 +26,7 @@ export class LayoutService {
     this._store$.dispatch(new ToggleAddTaskBar());
   }
 
-
-  showBookmarkBar() {
-    this._store$.dispatch(new ShowBookmarkBar());
-  }
-
-  hideBookmarkBar() {
-    this._store$.dispatch(new HideBookmarkBar());
-  }
-
-  toggleBookmarkBar() {
-    this._store$.dispatch(new ToggleBookmarkBar());
+  toggleSidebar() {
+    this._store$.dispatch(new ToggleSideBar());
   }
 }

src/app/core-ui/layout/store/layout.actions.ts

@@ -4,9 +4,7 @@ export enum LayoutActionTypes {
   ShowAddTaskBar = '[Layout] Show AddTaskBar',
   HideAddTaskBar = '[Layout] Hide AddTaskBar',
   ToggleAddTaskBar = '[Layout] Toggle AddTaskBar',
-  ShowBookmarkBar = '[Layout] Show BookmarkBar',
-  HideBookmarkBar = '[Layout] Hide BookmarkBar',
-  ToggleBookmarkBar = '[Layout] Toggle BookmarkBar',
+  ToggleSideBar = '[Layout] Toggle SideBar',
 }
 
 export class ShowAddTaskBar implements Action {
@@ -21,19 +19,11 @@ export class ToggleAddTaskBar implements Action {
   readonly type = LayoutActionTypes.ToggleAddTaskBar;
 }
 
-export class ShowBookmarkBar implements Action {
-  readonly type = LayoutActionTypes.ShowBookmarkBar;
-}
-
-export class HideBookmarkBar implements Action {
-  readonly type = LayoutActionTypes.HideBookmarkBar;
-}
-
-export class ToggleBookmarkBar implements Action {
-  readonly type = LayoutActionTypes.ToggleBookmarkBar;
+export class ToggleSideBar implements Action {
+  readonly type = LayoutActionTypes.ToggleSideBar;
 }
 
 export type LayoutActions =
   ShowAddTaskBar | HideAddTaskBar | ToggleAddTaskBar
-  | ShowBookmarkBar | HideBookmarkBar | ToggleBookmarkBar
+  | ToggleSideBar
   ;

src/app/core-ui/layout/store/layout.reducer.ts

@@ -6,18 +6,20 @@ export const LAYOUT_FEATURE_NAME = 'layout';
 export interface LayoutState {
   isShowAddTaskBar: boolean;
   isShowBookmarkBar: boolean;
+  isShowSideBar: boolean;
 }
 
 export const initialState: LayoutState = {
   isShowAddTaskBar: false,
   isShowBookmarkBar: false,
+  isShowSideBar: false,
 };
 
 export const selectLayoutFeatureState = createFeatureSelector<LayoutState>(LAYOUT_FEATURE_NAME);
 
 export const selectIsShowAddTaskBar = createSelector(selectLayoutFeatureState, state => state.isShowAddTaskBar);
 
-export const selectIsShowBookmarkBar = createSelector(selectLayoutFeatureState, state => state.isShowBookmarkBar);
+export const selectIsShowSideBar = createSelector(selectLayoutFeatureState, state => state.isShowSideBar);
 
 
 export function reducer(state: LayoutState = initialState, action: LayoutActions): LayoutState {
@@ -33,14 +35,8 @@ export function reducer(state: LayoutState = initialState, action: LayoutActions
       return {...state, isShowAddTaskBar: !state.isShowAddTaskBar};
 
 
-    case LayoutActionTypes.ShowBookmarkBar:
-      return {...state, isShowBookmarkBar: true};
-
-    case LayoutActionTypes.HideBookmarkBar:
-      return {...state, isShowBookmarkBar: false};
-
-    case LayoutActionTypes.ToggleBookmarkBar:
-      return {...state, isShowBookmarkBar: !state.isShowBookmarkBar};
+    case LayoutActionTypes.ToggleSideBar:
+      return {...state, isShowSideBar: !state.isShowSideBar};
 
     default:
       return state;

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

@@ -2,6 +2,7 @@
 <div class="wrapper"
      [class.mat-elevation-z3]="(bannerService.activeBanner$|async)">
   <button class="burger-trigger"
+          (click)="layoutService.toggleSidebar()"
           mat-icon-button>
     <mat-icon>menu</mat-icon>
   </button>
@@ -105,7 +106,7 @@
   <!--  </nav>-->
 
   <nav class="action-nav">
-    <button (click)="showAddTaskBar()"
+    <button (click)="layoutService.showAddTaskBar()"
             mat-icon-button
             [title]="T.MH.ADD_NEW_TASK|translate">
       <mat-icon>add</mat-icon>
@@ -119,7 +120,7 @@
       <mat-icon>bookmark</mat-icon>
     </button>
 
-    <button (click)="toggleShowNotes()"
+    <button (click)="noteService.toggleShow()"
             mat-icon-button
             [title]="T.MH.TOGGLE_SHOW_NOTES|translate">
       <mat-icon [class.rotate]="(noteService.isShowNotes$|async)"
@@ -135,7 +136,7 @@
     </button>
 
     <div class="play-btn-wrapper">
-      <button (click)="togglePlay()"
+      <button (click)="taskService.toggleStartTask()"
               [color]="(taskService.currentTaskId$|async)? 'accent': 'lighter'"
               class="play-btn"
               mat-mini-fab
@@ -163,13 +164,13 @@
         <div class="pomodoro-label">{{(pomodoroService.currentSessionTime$|async|msToMinuteClockString)}}
         </div>
         <div class="pomodoro-controls">
-          <button (click)="skipToNextPomodoroSession()"
+          <button (click)="pomodoroService.finishPomodoroSession()"
                   class="pomodoro-btn"
                   color=""
                   mat-mini-fab>
             <mat-icon>skip_next</mat-icon>
           </button>
-          <button (click)="stopPomodoro()"
+          <button (click)="pomodoroService.stop()"
                   class="pomodoro-btn"
                   color=""
                   mat-mini-fab>

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

@@ -1,15 +1,11 @@
 import {ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core';
 import {ProjectService} from '../../features/project/project.service';
-import {DialogCreateProjectComponent} from '../../features/project/dialogs/create-project/dialog-create-project.component';
-import {MatDialog} from '@angular/material/dialog';
 import {MatDrawer} from '@angular/material/sidenav';
 import {LayoutService} from '../layout/layout.service';
 import {BookmarkService} from '../../features/bookmark/bookmark.service';
 import {NoteService} from '../../features/note/note.service';
 import {TaskService} from '../../features/tasks/task.service';
-import {GlobalConfigService} from '../../features/config/global-config.service';
 import {PomodoroService} from '../../features/pomodoro/pomodoro.service';
-import {Project} from '../../features/project/project.model';
 import {T} from '../../t.const';
 import {BannerService} from '../../core/banner/banner.service';
 
@@ -23,8 +19,6 @@ export class MainHeaderComponent implements OnInit {
   T = T;
   progressCircleRadius = 10;
   circumference = this.progressCircleRadius * Math.PI * 2;
-  isProjectMenuDisabled = false;
-  isMainMenuDisabled = false;
 
   @Input() drawer: MatDrawer;
   @ViewChild('circleSvg', {static: true}) circleSvg: ElementRef;
@@ -36,7 +30,7 @@ export class MainHeaderComponent implements OnInit {
     public readonly taskService: TaskService,
     public readonly bannerService: BannerService,
     public readonly pomodoroService: PomodoroService,
-    private readonly _layoutService: LayoutService,
+    public readonly layoutService: LayoutService,
     private readonly _renderer: Renderer2,
   ) {
   }
@@ -51,27 +45,4 @@ export class MainHeaderComponent implements OnInit {
       this._renderer.setStyle(this.circleSvg.nativeElement, 'stroke-dashoffset', dashOffset);
     });
   }
-
-
-
-
-  showAddTaskBar() {
-    this._layoutService.showAddTaskBar();
-  }
-
-  toggleShowNotes() {
-    this.noteService.toggleShow();
-  }
-
-  togglePlay() {
-    this.taskService.toggleStartTask();
-  }
-
-  skipToNextPomodoroSession() {
-    this.pomodoroService.finishPomodoroSession();
-  }
-
-  stopPomodoro() {
-    this.pomodoroService.stop();
-  }
 }