FoodLoop-Web/src/app/layouts/full-layout.component.html

<header class="app-header navbar">
  <button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
  <a class="navbar-brand" href="#"></a>
  <ul class="nav navbar navbar-nav">
    <li class="nav-item dropdown" dropdown (onToggle)="toggled($event)">
      <a href class="nav-link dropdown-toggle" dropdownToggle (click)="false">
        <img src="assets/img/avatars/default.png" class="img-avatar" alt="avatar-image">
        <span class="d-md-down-none">{{displayName}}</span>
      </a>
      <div class="dropdown-menu dropdown-menu-right" *dropdownMenu aria-labelledby="simple-dropdown">

        <div class="dropdown-header text-center"><strong>Settings</strong></div>

        <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/account-edit']">
          <i class="fa fa-user"></i> Account Settings
        </a>
        <div class="divider"></div>
        <a class="dropdown-item" (click)="userLogout()" href="#"><i class="fa fa-lock"></i> Logout</a>
      </div>
    </li>
  </ul>
</header>

<div class="app-body">
  <div class="sidebar">
    <nav class="sidebar-nav">
      <ul class="nav">
        <li class="nav-item">
          <div class="row no-gutters mt-1 d-lg-none small text-center text-muted">
            <div class="col-12">Click &#9776; to Close Menu</div>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-speedometer"></i></div>
              <div class="col-10">Dashboard</div>
            </div>
          </a>
        </li>
        <li *ngIf="accountType == 'organisation'" class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/more-graphs-and-tables']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-map"></i></div>
              <div class="col-10">Infographics</div>
            </div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-basket"></i></div>
              <div class="col-10">Add Transaction</div>
            </div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-envelope-letter"></i></div>
              <div class="col-10">Enter Feedback</div>
            </div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/map']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-map"></i></div>
              <div class="col-10">Purchase Map</div>
            </div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/story-trail']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-map"></i></div>
              <div class="col-10">Story Trail</div>
            </div>
          </a>
        </li>
        <li *ngIf="accountType == 'customer'" class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-basket"></i></div>
              <div class="col-10">Leaderboard</div>
            </div>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-basket"></i></div>
              <div class="col-10">Transaction Log</div>
            </div>
          </a>
        </li>
        <li *ngIf="accountType == 'customer'" class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/category-month']">
            <div class="row no-gutters align-items-center">
              <div class="col-2"><i class="icon-basket"></i></div>
              <div class="col-10">Budget</div>
            </div>
          </a>
        </li>
        <li *ngIf="accountType == 'organisation'" class="nav-item">
            <a class="nav-link" routerLinkActive="active" [routerLink]="['/suppliers']">
              <div class="row no-gutters align-items-center">
                <div class="col-2"><i class="icon-speedometer"></i></div>
                <div class="col-10">Suppliers</div>
              </div>
            </a>
          </li>
          <li  *ngIf="accountType == 'organisation'" class="nav-item">
            <a class="nav-link" routerLinkActive="active" [routerLink]="['/payroll-log']">
              <div class="row no-gutters align-items-center">
                <div class="col-2"><i class="icon-basket"></i></div>
                <div class="col-10">Payroll Log</div>
              </div>
            </a>
          </li>
      </ul>
    </nav>
  </div>

  <!-- Main content -->
  <main class="main">

    <!-- Breadcrumb -->
    <ol class="breadcrumb">
      <app-breadcrumbs></app-breadcrumbs>
      <!-- Breadcrumb Menu-->
    </ol>

    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div><!-- /.conainer-fluid -->
  </main>

</div>

<footer class="app-footer">
  <a href="http://www.peartrade.org" target="_blank">&copy; 2017 Pear Trading Ltd.</a>
  <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>