navbar.component.html 1.58 KB
Newer Older
1
<nav class="navbar navbar-expand-md navbar-dark py-0 mb-4">
2
3
4
5
6
7
8
9
10
11
  <div class="container px-0">
    <a class="navbar-brand d-flex align-items-center mr-0 px-2" routerLink="/">
      <img src="assets/logo.png" alt="Logo" title="{{ navbar.title }}" height="60px"/>
    </a>
    <button class="navbar-toggler" type="button" (click)="toggleNavbar()">
      <span class="fa fa-bars"></span>
    </button>
    <div id="navbar" class="collapse navbar-collapse" [class.collapse]="navbarCollapsed">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" *ngFor="let link of navbar.links">
12
13

          <!-- Simple link -->
14
15
16
17
18
          <div *ngIf="!link.subMenu">
            <a class="nav-link d-flex align-items-center"
               [href]="link.url" target="_blank">{{ link.label }}</a>
          </div>

19
20
          <!-- OR Dropdown button -->
          <div *ngIf="link.subMenu" class="dropdown-container" ngbDropdown>
21

22
23
            <!-- Toggle button -->
            <a class="nav-link d-flex align-items-center dropdown-toggle" ngbDropdownToggle
24
25
               role="button"
               aria-haspopup="true"
26
27
28
29
30
31
               aria-expanded="false">
              {{ link.label }}
            </a>

            <!-- Items -->
            <div class="dropdown-menu" ngbDropdownMenu>
32
33
              <div *ngFor="let subItem of link.subMenu">
                <a class="dropdown-item"
34
35
36
37
                   target="_blank"
                   [href]="subItem.url">
                  {{ subItem.label }}
                </a>
38
39
40
              </div>
            </div>
          </div>
41
42
43
44
45
        </li>
      </ul>
    </div>
  </div>
</nav>