openaccounting-web/src/app/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<a *ngIf="navItems['/login'].hidden" class="navbar-brand" routerLink="/"><img src="assets/oa-logo1.svg" width="176" height="23" alt="Open Accounting"/></a>
<a *ngIf="!navItems['/login'].hidden" class="navbar-brand" href="/"><img src="assets/oa-logo1.svg" width="176" height="23" alt="Open Accounting"/></a>

  <button class="navbar-toggler d-md-none" type="button" (click)="isTopNavCollapsed = !isTopNavCollapsed" data-toggle="collapse" aria-controls="leftNav" aria-expanded="false" aria-label="Toggle navigation">
        <!-- <span class="navbar-toggler-icon"></span> -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
      </button>
  <div [ngbCollapse]="isTopNavCollapsed" class="collapse navbar-collapse" id="topNav">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="/pricing">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/docs/getting-started">Docs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/api/">API</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/source-code">Source Code</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
      <div class="login">
        <ul class="navbar-nav">
          <li class="nav-item" *ngIf="!navItems['/login'].hidden">
            <a class="nav-link" href="/login">Login</a>
          </li>
          <li class="nav-item" *ngIf="!navItems['/login'].hidden">
            <a class="nav-link" href="/register">Sign Up</a>
          </li>
          <li class="nav-item" *ngIf="!navItems['/logout'].hidden">
            <a class="nav-link" routerLink="/logout">Logout</a>
          </li>
        </ul>
      </div>
  </div>
</nav>
<div class="container-fluid" [ngClass]="{loading: sessionService.isLoading()}">
  <div class="row">
    <div class="col-12 col-md-3 sidebar" *ngIf="!hideLeftNav" [ngClass]="{display: showLeftNav}">
        <!-- <span class="navbar-toggler-icon"></span> -->
      <nav class="left-nav-links" id="leftNav">
        <ul class="nav">
          <li *ngFor="let item of leftNav">
            <div *ngIf="!item.hidden">
              <a [routerLink]="item.link" [ngClass]="{active: router.isActive(item.link)}">{{item.name}}</a>
            </div>
          </li>
        </ul>
        <h5 *ngIf="loggedIn" class="tools">Tools</h5>
        <ul *ngIf="loggedIn" class="nav">
          <li *ngFor="let item of toolsNav">
            <div *ngIf="!item.hidden">
              <a [routerLink]="item.link" [ngClass]="{active: router.isActive(item.link)}">{{item.name}}</a>
            </div>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col content">
      <button *ngIf="!showLeftNav" [ngClass]="{display: hideLeftNav}" class="navbar-toggler" type="button" (click)="showLeftNav = true; hideLeftNav = false;" data-toggle="collapse" aria-controls="leftNav" aria-expanded="false" aria-label="Toggle navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
      </button>
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
<div class="footer">
  <p>Copyright &copy; 2020 Open Accounting, LLC<br>
  <a href="/tou">Terms of Use</a> | <a href="/privacy-policy">Privacy Policy</a></p>
</div>