alfresco-ng2-components/docs/core/sidenav-layout.component.md

Added, Status, Last reviewed

Added	Status	Last reviewed
v2.3.0	Active	2018-04-11

Sidenav Layout component

Displays the standard three-region ADF application layout.

Basic Usage

<adf-sidenav-layout
    [sidenavMin]="70"
    [sidenavMax]="220"
    [stepOver]="600"
    [hideSidenav]="false"
    [expandedSidenav]="true"
    (expanded)="setState($event)">

    <adf-sidenav-layout-header>
        <ng-template let-toggleMenu="toggleMenu">
            <div class="app-header">
                <button (click)="toggleMenu()">toggle menu</button>
            </div>
        </ng-template>
    </adf-sidenav-layout-header>

    <adf-sidenav-layout-navigation>
        <ng-template let-isMenuMinimized="isMenuMinimized">
            <div *ngIf="isMenuMinimized()" class="app-compact-navigation"></div>
            <div *ngIf="!isMenuMinimized()" class="app-expanded-navigation"></div>
        </ng-template>
    </adf-sidenav-layout-navigation>

    <adf-sidenav-layout-content>
        <ng-template>
            <router-outlet></router-outlet>
        </ng-template>
    </adf-sidenav-layout-content>

</adf-sidenav-layout>

Class members

Properties

Name	Type	Default	Description
sidenavMin	number		(required) Width in pixels when compacted
sidenavMax	number		(required) Width in pixels when expanded
stepOver	number		(required) "Breakpoint" size (ie, number of pixels for selecting between mobile and desktop layouts)
hideSidenav	boolean	false	Toggles showing/hiding the navigation region
expandedSidenav	boolean	true	Should the navigation region be expanded initially?

Details

This component displays the familiar ADF layout consisting of three regions: header, navigation and content.

The layout will select between a small screen (ie, mobile) configuration and a large screen configuration according to the screen size in pixels (the stepOver property sets the number of pixels at which the switch will occur).

The small screen layout uses the Angular Material Sidenav component which is described in detail on their website.

The ADF-style (ie, large screen) Sidenav has two states: expanded and compact. The navigation is always displayed regardless of the state but it will have a reduced width when compacted. Set the widths for the expanded and compact states with the sidenavMin and sidenavMax properties.

The contents of the 3 regions can be injected through Angular's template transclusion as shown in the usage example above.

Desktop layout (screen width greater than the stepOver value):

Mobile layout (screen width less than the stepOver value):

Public attributes

Name	Type	Default	Description
menuOpenState$	Observable<boolean>	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:

• toggleMenu(): void Triggers menu toggling.

• isMenuMinimized(): boolean The expanded/compact (minimized) state of the navigation. This one only makes sense in case of desktop size, when the screen size is above the value of stepOver.

menuOpenState$

Beside the template context's isMenuMinimized variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable.

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.