<mat-sidenav-container class="sidenav-container-wraper font-size-15px" ngClass.lt-md="lt-md">
  <mat-sidenav mode="over" opened="false" #mobilesidenav>
      <span class="actions-row" fxLayout="row">
          <span fxFlexLayout="start start" fxFlex="50"><i (click)="mobilesidenav.toggle()"
                                                          class="material-icons">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 *ngFor="let item of sideMenu" class="menu-item general-item">
      <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 *ngFor="let subMenuItem of item.subMenu" class="menu-item submenu-item" fxLayout="row" fxLayoutWraps>
        <div class="link-wraper"><a *ngIf="subMenuItem.isVisible" matLine
                                    routerLink="{{'[lang]'|translate: {url: subMenuItem.rout} }}"
                                    routerLinkActive="active" [ngClass]="{'active' : subMenuItem.isActive}">
          {{subMenuItem.translateKey|translate}}</a>
        </div>
      </div>
    </div>
    <!--div class="newsletter">
        <div class="heading font-size-30px">{{'[menu.newsletter]'|translate}}</div>
        <mat-input-container floatPlaceholder="never">
            <input matInput type="email" [placeholder]="'[menu.newsletter.placeholder]'|translate" class="newsletter-input">
        </mat-input-container>
        <div fxLayout="row"><button mat-button color="accent" fxFlex fxLayout="row" fxLayoutAlign="center center">{{'[menu.newsletter.button]'|translate}}</button></div>
        <div class="text">{{'[menu.newsletter.text]'|translate}}</div>
    </div-->
  </mat-sidenav>
  <!-- primary content -->
  <knk-header (sidePanelAction)='showSideNav()'>
  </knk-header>
  <main ngClass.lt-md="main-xs" ngClass.gt-sm="main-gt-md">
    <router-outlet></router-outlet>
  </main>
  <knk-footer class="footer">
    <div style="top: 18px; transform-origin: 598px 7px 0px;">
    </div>
  </knk-footer>

</mat-sidenav-container>
