<div class="row body">

  <!-- ############### Left Main ###############-->
  <div id="main" style="z-index:9999 !important;">
    <div class="no-padding no-margin" [ngClass]="{'close': !openLayer, 'open': openLayer}">
      <div class="main-list">
        <img src="assets/img/logo.png" class="logo" alt="">
        <i class="material-icons close-arrow" (click)="swithMode();">
          <div class="arrow" [hidden]="!openLayer">
            keyboard_arrow_left
          </div>
          <div class="arrow" [hidden]="openLayer">
            keyboard_arrow_right
          </div>
        </i>
        <div class="title">
          <h1>WEVER<br/>DASHBOARD</h1>
        </div>
        <ul>
          <li [routerLinkActive]="['active']" [routerLink]="['/dashboard/home']">
            <i class="material-icons">dashboard</i>
            <p [hidden]="!openLayer">Home</p>
          </li>
          <li [routerLinkActive]="['active']" [routerLink]="['/dashboard/services']">
            <i class="material-icons">build</i>
            <p [hidden]="!openLayer">Services</p>
          </li>
          <li [routerLinkActive]="['active']" [routerLink]="['/dashboard/cities']">
            <i class="material-icons">location_city</i>
            <p [hidden]="!openLayer">Cities Services</p>
          </li>
          <li [routerLinkActive]="['active']" [routerLink]="['/dashboard/stats']">
            <i class="material-icons">trending_up</i>
            <p [hidden]="!openLayer">Statistiques</p>
          </li>
          <li [routerLinkActive]="['active']" [routerLink]="['/dashboard/settings']">
            <i class="material-icons">settings</i>
            <p [hidden]="!openLayer">Settings</p>
          </li>
          <li [routerLink]="['/login']">
            <i class="material-icons">power_settings_new</i>
            <p [hidden]="!openLayer">Logout</p>
          </li>
        </ul>
      </div>
    </div>
  </div>



  <div class="col no-padding no-margin">
    <!-- ############### Header ###############-->
    <div class="col col-md-12" id="header" style="z-index:999 !important;">
      Welcome {{ user.firstname }} {{ user.lastname[0] }}.<br />

      Mode : {{ modeServer }}
    </div>

    <!-- ############### Content ###############-->
    <div class="col" id="content">
      <router-outlet></router-outlet>
    </div>
  </div>



</div>