open-learning-exchange/planet

<div class="app-bar-container">
  <mat-toolbar class="toolbar-container" *ngIf="deviceType != deviceTypes.MOBILE">
    <div class="menu-container">
      <img src="assets/landing-page/logos/uplanet.png" class="img-logo" alt="Logo" width="180" height="30" />
      <div class="menu-row">
        <a mat-button class="navbar-button" [href]="baseUrl + '/spa/myDashboard'">
          <mat-icon class="icon-item">person</mat-icon>
          miDashboard
        </a>
        <a mat-button class="navbar-button" [href]="baseUrl + '/spa/resources'">
          <mat-icon class="icon-item">local_library</mat-icon>
          Biblioteca
        </a>
        <a mat-button class="navbar-button" [href]="baseUrl + '/spa/courses'">
          <mat-icon class="icon-item">book</mat-icon>
          Cursos
        </a>
        <a mat-button class="navbar-button" [href]="baseUrl + '/spa/teams'">
          <mat-icon class="icon-item">group</mat-icon>
          Equipos
        </a>
        <a mat-button class="navbar-button" [href]="baseUrl + '/spa/enterprises'">
          <mat-icon class="icon-item">business</mat-icon>
          Empresas
        </a>
      </div>
    </div>
  </mat-toolbar>
  <mat-toolbar *ngIf="deviceType === deviceTypes.MOBILE" style="color: #ffffff;">
    <button mat-icon-button class="hamburger-button"
      (click)="toggleNav()" i18n-title title="Menu">
      <mat-icon>menu</mat-icon>
    </button>
    <img src="assets/landing-page/logos/uplanet.png" alt="Logo" width="180" height="30" />
  </mat-toolbar>
  <mat-sidenav-container autosize [@slideInOut]="menuState" planetClickOutside (planetClickOutside)="closeMenu()">
    <mat-sidenav #sidenav mode="side" class="main-sidenav" opened="true">
      <mat-nav-list>
        <a mat-button class="mobile-navbar-button" [href]="baseUrl + '/spa/myDashboard'">
          <mat-icon class="icon-item">person</mat-icon>
          <label>miDashboard</label>
        </a>
      </mat-nav-list>
      <mat-nav-list>
        <a mat-button class="mobile-navbar-button" [href]="baseUrl + '/spa/resources'">
          <mat-icon class="icon-item">local_library</mat-icon>
          <label>Biblioteca</label>
        </a>
      </mat-nav-list>
      <mat-nav-list>
        <a mat-button class="mobile-navbar-button" [href]="baseUrl + '/spa/courses'">
          <mat-icon class="icon-item">book</mat-icon>
          <label>Cursos</label>
        </a>
      </mat-nav-list>
      <mat-nav-list>
        <a mat-button class="mobile-navbar-button" [href]="baseUrl + '/spa/teams'">
          <mat-icon class="icon-item">group</mat-icon>
          <label>Equipos</label>
        </a>
      </mat-nav-list>
      <mat-nav-list>
        <a mat-button class="mobile-navbar-button" [href]="baseUrl + '/spa/enterprises'">
          <mat-icon class="icon-item">business</mat-icon>
          <label>Empresas</label>
        </a>
      </mat-nav-list>
    </mat-sidenav>
  </mat-sidenav-container>
</div>