<md-sidenav-container class="sidenav-container-wraper font-size-15px" ngClass.lt-md="lt-md">
  <md-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 mdLine routerLink="en/login">{{'[menu.signin]'|translate}}</a></span>
      <span class="action" fxFlexLayout="end start" *ngIf="isLogin" fxFlex><a mdLine (click)="logout()" routerLink="en/login">{{'[menu.signout]'|translate}}</a></span>
      </span>
      <md-divider></md-divider>
      <div *ngFor="let item of sideMenu" class="menu-item general-item">
          <div class="link-wraper"><a *ngIf="item.isVisible" mdLine routerLink="{{item.rout}}" [ngClass]="{'active' : item.isActive}" (click)="setActiveMenu(item)">{{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" mdLine routerLink="{{subMenuItem.rout}}" [ngClass]="{'active' : subMenuItem.isActive}"
                      (click)="setActiveMenu(subMenuItem)">{{subMenuItem.translateKey|translate}}</a>
              </div>
          </div>
      </div>
      <div class="newsletter">
          <div class="heading font-size-30px">{{'[menu.newsletter]'|translate}}</div>
          <md-input-container floatPlaceholder="never">
              <input mdInput type="email" [placeholder]="'[menu.newsletter.placeholder]'|translate" class="newsletter-input">
          </md-input-container>
          <div fxLayout="row"><button md-button color="accent" fxFlex fxLayout="row" fxLayoutAlign="center center">{{'[menu.newsletter.button]'|translate}}</button></div>
          <div class="text">{{'[menu.newsletter.text]'|translate}}</div>
      </div>
  </md-sidenav>
  <!-- primary content -->
  <knk-header class="brand-color mat-elevation-z4" (sidePanelAction)='showSideNav()'></knk-header>
  <main ngClass.lt-md="main-xs" ngClass.gt-sm="main-gt-md">
      <router-outlet></router-outlet>
  </main>
  <knk-footer class="brand-color"></knk-footer>

</md-sidenav-container>
