<ion-menu #menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Silk Way Rally</ion-title>
      <ion-item>
        <ion-label>{{ 'Language' | translate }}</ion-label>
        <ion-select (ionChange)="changeLang($event)" interface="action-sheet" [cancelText]="'Cancel' | translate">
            <ion-option
              *ngFor="let lang of langs"
              [selected]="lang.id == translate.currentLang ? true : null"
              [value]="lang.id">{{ lang.title }}</ion-option>
        </ion-select>
      </ion-item>
    </ion-toolbar>
  </ion-header>

  <ion-content fullscreen id="sidenav">
    <ion-list *ngFor="let p of pages; let i = index;">
      <ion-item>
        <ion-icon *ngIf="p.icon !== undefined" class="icon-{{ p.icon }}"></ion-icon>

        <button menuClose (click)="openPage(i)">
          {{ p.title | translate }}
        </button>

        <ion-icon
          [ngClass]="{'active': isGroupShown(i) }"
          name="arrow-forward"
          (click)="toggleGroup(i)"
          *ngIf="p.content !== undefined">
        </ion-icon>
      </ion-item>
      <ion-list *ngIf="isGroupShown(i)" class="submenu">
        <button detail-none ion-item menuClose *ngFor="let row of p.content; let j = index" (click)="openSubPage(i, j)" class="submenu-item">
          {{ row.title | translate }}
        </button>
      </ion-list>
    </ion-list>

    <div class="share-wrapper">
      <div class="share-icon fi-icon icon-facebook2" onclick="window.open('https://www.facebook.com/Silkwayrally', '_system', 'location=yes'); return false;"></div>
      <div class="share-icon fi-icon icon-twitter2" onclick="window.open('https://twitter.com/#!/silkwayrally', '_system', 'location=yes'); return false;"></div>
      <div class="share-icon fi-icon icon-instagram2" onclick="window.open('https://www.instagram.com/silkwayrally/', '_system', 'location=yes'); return false;"></div>
      <div class="share-icon fi-icon icon-vk2" onclick="window.open('https://vk.com/silkwayrally', '_system', 'location=yes'); return false;"></div>
      <div class="share-icon fi-icon icon-youtube2" onclick="window.open('https://www.youtube.com/channel/UC5sbnqhekqlNpATpc5BkCTw', '_system', 'location=yes'); return false;"></div>

      <div class="share-partner gazprom" onclick="window.open('http://www.gazprom.ru/', '_system', 'location=yes'); return false;"></div>
      <div class="share-partner fblife" onclick="window.open('http://fblife.com/', '_system', 'location=yes'); return false;"></div>
    </div>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>