
<div class="app">
  <mat-sidenav-container class="sidenav-container-wraper">
    <mat-sidenav mode="over" [opened]="bSideBarOpen" #mobilesidenav><span class="actions-row" fxLayout="row"><span fxFlexLayout="start start" fxFlex="50"><i class="material-icons" (click)="mobilesidenav.close()">close</i></span><span class="action" fxFlexLayout="end start" *ngIf="!isLogin" fxFlex><a matLine routerLink="{{'[lang]'|translate: {url: 'login'} }}">{{'[menu.signin]'|translate}}</a></span><span class="action" fxFlexLayout="end start" *ngIf="isLogin" fxFlex><a matLine (click)="logout()" routerLink="{{'[lang]'|translate: {url: 'login'} }}">{{'[menu.signout]'|translate}}</a></span></span>
      <mat-divider></mat-divider>
      <div class="menu-item general-item" *ngFor="let item of sideMenu">
        <div class="link-wraper"><a *ngIf="item.isVisible" matLine routerLink="{{'[lang]'|translate: {url: item.rout} }}" routerLinkActive="active" [ngClass]="{'active': item.isActive}">{{item.translateKey|translate}}</a></div>
      </div>
    </mat-sidenav>
    <mat-sidenav-content #sidenavContent>
      <div class="app__content-outer">
        <div class="app__content-inner" fxFlex="1 1 100" fxLayout="column" fxFlexFill>
          <div class="mdc-elevation-transition app__header app__header--fixed" #header>
            <knk-header (modeToggled)="onModeToggled($event)" (sidePanelAction)="showSideNav()"></knk-header>
            <div>
              <ng-container #panel></ng-container>
            </div>
          </div>
          <main fxFlex="1 1 100" fxLayout="column" fxFlexFill>
            <div #content>
              <div class="app__content-section">
                <ng-container>
                  <router-outlet></router-outlet>
                </ng-container>
              </div>
            </div>
          </main>
          <knk-footer class="footer">
            <div style="top: 18px; transform-origin: 598px 7px 0px;"></div>
          </knk-footer>
        </div>
        <router-outlet name="mvp"></router-outlet>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>