finished look of sidebar

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

@@ -4,10 +4,15 @@ import { MemoizedSelector, select, Store } from '@ngrx/store';
 import { AdminSidebarSectionState, AdminSidebarState, } from './admin-sidebar.reducer';
 import { hasValue } from '../../shared/empty.util';
 import { map } from 'rxjs/operators';
-import { AdminSidebarSectionToggleAction, AdminSidebarToggleAction } from './admin-sidebar.actions';
+import {
+  AdminSidebarSectionCollapseAllAction,
+  AdminSidebarSectionToggleAction,
+  AdminSidebarToggleAction
+} from './admin-sidebar.actions';
 import { AppState, keySelector } from '../../app.reducer';
 import { slideSidebar } from '../../shared/animations/slide';
 import { CSSVariableService } from '../../shared/sass-helper/sass-helper.service';
+import { rotateInOut } from '../../shared/animations/rotate';
 
 const sidebarSectionStateSelector = (state: AppState) => state.adminSidebar.sections;
 const sidebarStateSelector = (state) => state.adminSidebar;
@@ -20,11 +25,12 @@ const sectionByNameSelector = (name: string): MemoizedSelector<AppState, AdminSi
   selector: 'ds-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
-  animations: [slideSidebar]
+  animations: [slideSidebar, rotateInOut]
 })
 export class AdminSidebarComponent implements OnInit {
   sidebarCollapsed: Observable<boolean>;
   sidebarWidth: Observable<string>;
+  sidebarActive = true;
 
   constructor(private store: Store<AdminSidebarState>,
               private variableService: CSSVariableService) {
@@ -52,6 +58,21 @@ export class AdminSidebarComponent implements OnInit {
 
   toggle(event: Event) {
     event.preventDefault();
+    // Is sidebar closing?
+    if (this.sidebarActive) {
+      this.sidebarActive = false;
+      this.store.dispatch(new AdminSidebarSectionCollapseAllAction());
+    }
     this.store.dispatch(new AdminSidebarToggleAction());
   }
+
+  /**
+   * Method to change this.collapsed to false when the slide animation ends and is sliding open
+   * @param event The animation event
+   */
+  finishSlide(event: any): void {
+    if (event.fromState === 'collapsed') {
+      this.sidebarActive = true;
+    }
+  }
 }