member_webapp/src/app/pages/pages.component.html

<div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" (click)="onLayoutClick()">

    <div #layoutContainer class="layout-container" [ngClass]="{'menu-layout-static': !isOverlay(),
            'menu-layout-overlay': isOverlay(),
            'layout-menu-overlay-active': overlayMenuActive,
            'menu-layout-horizontal': isHorizontal(),
            'menu-layout-slim': isSlim(),
            'layout-menu-static-inactive': staticMenuDesktopInactive,
            'layout-menu-static-active': staticMenuMobileActive}">

        <of-topbar></of-topbar>

        <div class="layout-menu" [ngClass]="{'layout-menu-dark':darkMenu}" (click)="onMenuClick($event)">
            <p-scrollPanel #scrollPanel [style]="{height: '100%'}">
                <of-inline-profile *ngIf="profileMode=='inline'&&!isHorizontal()"></of-inline-profile>
                <of-menu [reset]="resetMenu"></of-menu>
            </p-scrollPanel>
        </div>

        <div class="layout-main">
            <of-breadcrumb></of-breadcrumb>

            <div class="layout-content" [@pageRouteAnim]="outlet.isActivated ? outlet.activatedRoute : ''">
                <router-outlet #outlet="outlet"></router-outlet>
                <of-footer></of-footer>
            </div>
        </div>

        <of-rightpanel></of-rightpanel>

        <div class="layout-mask"></div>
    </div>
</div>