[ADF-2626] added preserved state functionality for sidenav component (#3278)

* [ADF-2626] added preserved state functionality for sidenav component

* [ADF-2626] changed logic for preserving the sidenav component state

* [ADF-2626] added missing curly brace }

* [ADF-2626] small changes on logic based on pr comments

* [ADF-2843] added tooltip for create folder and edit folder icons from Content Services

* Revert "[ADF-2843] added tooltip for create folder and edit folder icons from Content Services"

This reverts commit d5a7abb65b.

* [ADF-2626] changed casting

* [ADF-2626] updated documentation with event

* [ADF-2626] removed app-config pipe because it was not being used

demo-shell/src/app.config.json

@@ -492,5 +492,10 @@
     "adf-version-manager": {
       "allowComments": true,
       "allowDownload": true
+    },
+
+    "sideNav": {
+      "expandedSidenav": true,
+      "preserveState": true
     }
 }

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -1,4 +1,4 @@
-<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false" [expandedSidenav]="false">
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false"[expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core';
 
 @Component({
     templateUrl: 'app-layout.component.html',
@@ -25,7 +26,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
     },
     encapsulation: ViewEncapsulation.None
 })
-export class AppLayoutComponent {
+
+export class AppLayoutComponent implements OnInit {
 
     links: Array<any> = [
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
@@ -48,6 +50,25 @@ export class AppLayoutComponent {
         { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
     ];
 
-    constructor() {
+    expandedSidenav = false;
+
+
+    ngOnInit() {
+        const expand = this.config.get<boolean>('sideNav.expandedSidenav');
+        const preserveState = this.config.get('sideNav.preserveState');
+
+        if (preserveState && expand)  {
+            this.expandedSidenav = (this.userpreference.get('expandedSidenav', expand.toString()) === 'true');
+        } else if (expand) {
+            this.expandedSidenav = expand;
+        }
+    }
+    constructor( private userpreference: UserPreferencesService, private config: AppConfigService) {
+    }
+
+    setState(state) {
+        if (this.config.get('sideNav.preserveState')) {
+            this.userpreference.set('expandedSidenav', state);
+        }
     }
 }

docs/core/sidenav-layout.component.md

@@ -18,7 +18,8 @@ Displays the standard three-region ADF application layout.
     [sidenavMax]="220"
     [stepOver]="600"
     [hideSidenav]="false"
-    [expandedSidenav]="true">
+    [expandedSidenav]="true"
+    (expanded)="setState($event)">
 
     <adf-sidenav-layout-header>
         <ng-template let-toggleMenu="toggleMenu">
@@ -88,6 +89,11 @@ Mobile layout (screen width less than the `stepOver` value):
 | --- | --- | --- | --- |
 | menuOpenState$ | Observable&lt;boolean&gt; | true | Another way to listen to menu open/closed state |
 
+### Events
+
+| Name | Type | Description |
+| expanded | `EventEmitter<boolean>` | Emmitted when the menu toggle and the collapsed/expanded state of the sideNav changes
+
 ### Template context
 
 Each template is given a context containing the following methods:
@@ -106,3 +112,23 @@ Every time the menu state is changed, the following values are emitted:
 
 - true, if the menu got into opened state
 - false, if the menu git into closed state
+
+### Preserving the menu state
+
+It is possible to preserve the state of the menu between sessions. This require to first set a property in the appConfig.json file. 
+
+```
+    "sideNav" : {
+        "preserveState" : true
+    }
+```
+If this property is set, the collapsed/expanded state will be stored in the local storage, and it will be restored with page reload or the next time the user visits the app. 
+Beside this, it is also possible to set the default value in the appConfig.json file: 
+
+```
+    "sideNav" : {
+        "expandedSidenav" : true
+    }
+```
+
+By default the collapsed/exapnded state should be read from the application configuration file, but only if there is no value for the collapsed/expanded state in the local storage.

lib/core/sidenav-layout/components/sidenav-layout/sidenav-layout.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, ContentChild, Input, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef } from '@angular/core';
+import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
 import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
@@ -38,6 +38,8 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
     @Input() hideSidenav = false;
     @Input() expandedSidenav = true;
 
+    @Output() expanded = new EventEmitter<boolean>();
+
     @ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective;
     @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective;
     @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective;
@@ -57,6 +59,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
     };
 
     constructor(private mediaMatcher: MediaMatcher) {
+
         this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     }
 
@@ -89,6 +92,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
         }
 
         this.container.toggleMenu();
+        this.expanded.emit(!this.isMenuMinimized);
     }
 
     get isMenuMinimized() {