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">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/dashboard']">
            <i class="icon-speedometer"></i> Dashboard
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/add-data']">
            <i class="icon-basket"></i> Add Transaction
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/feedback']">
            <i class="icon-envelope-letter"></i> Enter Feedback
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
            <i class="icon-basket"></i> Transaction Log
          </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>