progress vertical menu

src/app/+admin/admin-sidebar/admin-sidebar.component.ts

@@ -1,10 +1,45 @@
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store';
+import { AdminSidebarSectionsState, AdminSidebarSectionState } from './admin-sidebar.reducer';
+import { hasValue } from '../../shared/empty.util';
+import { map } from 'rxjs/operators';
+import { AdminSidebarSectionToggleAction } from './admin-sidebar.actions';
 
+const sidebarSectionStateSelector = (state: AdminSidebarSectionsState) => state.adminSidebarSection;
+
+const sectionByNameSelector = (name: string): MemoizedSelector<AdminSidebarSectionsState, AdminSidebarSectionState> => {
+  return keySelector<AdminSidebarSectionState>(name);
+};
+
+export function keySelector<T>(key: string): MemoizedSelector<AdminSidebarSectionsState, T> {
+  return createSelector(sidebarSectionStateSelector, (state: AdminSidebarSectionState) => {
+    if (hasValue(state)) {
+      return state[key];
+    } else {
+      return undefined;
+    }
+  });
+}
 @Component({
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
 })
 export class AdminSidebarComponent {
+  constructor(private store: Store<AdminSidebarSectionsState>) {
 
-}
+  }
+
+  public active(name: string): Observable<boolean> {
+    return this.store.pipe(
+      select(sectionByNameSelector(name)),
+      map((state: AdminSidebarSectionState) => hasValue(state) ? !state.sectionCollapsed : false)
+    );
+  }
+
+  toggle(event: Event, name: string) {
+    event.preventDefault();
+    this.store.dispatch(new AdminSidebarSectionToggleAction(name));
+  }
+}