navbar.component.html 3.06 KB
Newer Older
1
<nav class="navbar fixed-top navbar-expand-md navbar-dark py-0 mb-4">
2
3
  <div class="container px-0">
    <a class="navbar-brand d-flex align-items-center mr-0 px-2" routerLink="/">
4
      <img src="{{ navbar.logo }}" alt="{{ navbar.name }} logo" title="{{ navbar.title }}" height="60px"/>
5
6
7
8
9
10
11
    </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
          <div class="mr-2" *ngIf="!link.subMenu">
15
16
17
18
            <a class="nav-link d-flex align-items-center"
               [href]="link.url" target="_blank">{{ link.label }}</a>
          </div>

19
          <!-- OR Dropdown button -->
20
          <div class="mr-2" *ngIf="link.subMenu" class="dropdown-container" ngbDropdown>
21
22
            <!-- Toggle button -->
            <a class="nav-link d-flex align-items-center dropdown-toggle" ngbDropdownToggle
23
24
               role="button"
               aria-haspopup="true"
25
               aria-expanded="false">{{ link.label }}</a>
26
27
            <!-- Items -->
            <div class="dropdown-menu" ngbDropdownMenu>
28
29
              <div *ngFor="let subItem of link.subMenu">
                <a class="dropdown-item"
30
                   target="_blank" [href]="subItem.url">{{ subItem.label }}</a>
31
32
33
              </div>
            </div>
          </div>
34
        </li>
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

        <!-- Documentation -->
        <li class="nav-item">
          <div class="mr-2" class="dropdown-container" ngbDropdown>
            <a class="nav-link d-flex align-items-center dropdown-toggle" ngbDropdownToggle
               role="button"
               aria-haspopup="true"
               aria-expanded="false">
              More ...
            </a>
            <div class="dropdown-menu" ngbDropdownMenu>
              <!-- About link -->
              <a class="dropdown-item" routerLink="/about" routerLinkActive="true" title="About">About</a>
              <!-- Join us link -->
              <a class="dropdown-item" routerLink="/join" routerLinkActive="true" title="Join us">Join us</a>
              <!-- Legal mentions link -->
              <a class="dropdown-item" routerLink="/legal" routerLinkActive="true" title="Legal mentions" >Legal mentions</a>
              <!-- Help link -->
              <a class="dropdown-item" routerLink="/help" routerLinkActive="true" title="Help">Help</a>
            </div>
          </div>
        </li>
57
58
      </ul>
    </div>
59
60
61
62
    <a class="navbar-brand d-flex align-items-center"
       [href]="navbar.contributor.url" target="_blank">
      <img src="{{ navbar.contributor.logo }}" alt="{{ navbar.contributor.name }} logo" height="60px"/>
    </a>
63
    <div>
64
65
      <!--<a *ngIf="displayBackButton"
         [routerLink]="['/']"
66
         [queryParams]="previousQueryParam">
67
        <button type="button" class="btn btn-secondary">
68
69
          < Back to form
        </button>
70
      </a>-->
71
72
    </div>

73
74
  </div>
</nav>