catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17 <nav class="navbar navbar-dark">
  18   <div class="clearfix">
  19     <button (click)="isCollapsed = !isCollapsed"
  20             class="navbar-toggler pull-xs-right hidden-sm-up" type="button"
  21             aria-controls="bd-main-nav"
  22             aria-label="Toggle navigation">
  23       {{menuIcon}}
  24     </button>
  25     <a (click)="isCollapsed = true" class="navbar-brand hidden-sm-up" [routerLink]="[brandMenu.path]">
  26       {{brandMenu.title}}
  27     </a>
  28   </div>
  29   <div class="navbar-toggleable-xs navbar-collapse" id="bd-main-nav" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
  30     <ul class="nav navbar-nav">
  31       <li (click)="isCollapsed = true" class="nav-item" routerLinkActive="active">
  32         <a class="navbar-brand hidden-xs-down" [routerLink]="[brandMenu.path]">{{brandMenu.title}}</a>
  33       </li>
  34       <li (click)="isCollapsed = true" *ngFor="let menuItem of menuItems" class="nav-item" routerLinkActive="active" [ngClass]="getMenuItemClasses(menuItem)">
  35         <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
  36       </li>
  37     </ul>
  38   </div>
  39 </nav>