Menu Structure

Header Component

File: shared -> header -> header.component.html

                
<header class="header {{classes}}" (window:scroll)="windowScroll()" #header>
  <div class="container">
    <nav class="p-lg-0 navbar navbar-expand-lg navbar-light">
      <button type="button" class="navbar-toggler" 
      [attr.aria-expanded]="!isCollapsed" aria-controls="navbarCollapse" aria-label="Toggle navigation">
        <span class="toggler-icon"></span>
        <span class="toggler-icon"></span>
        <span class="toggler-icon"></span>
      </button>
      <div class="navbar-collapse" #collapse="ngbCollapse" [(ngbCollapse)]="isCollapsed" id="navbarCollapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link name" href="javascript:void(0)">
              <span>B</span>
              <span>O</span>
              <span>B</span>
            </a>
          </li>
          <ng-container *ngFor="let nav of navigations; let i = index;">
            <li class="nav-item">
              <a href="javascript: void(0);" class="nav-link">{{nav}}</a>
            </li>
          </ng-container>
          <li class="nav-item">
            <a href="javascript:void(0)" class="nav-link">Download CV</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>