<nav [ngClass]="navbarClass">

  <div *ngIf="configData.Logo.visible">
      <button [ngClass]="logoButtonClass" [routerLink]="configData.Logo.rlink" (click)= "logoButtonClick()">
          <img  [src]="configData.Logo.imageUrl"
              width="40" height="40">
      </button>
  </div>

  <div *ngIf="configData.Brand.visible">
      <button [ngClass]="navbarBrandClass" [routerLink]="configData.Brand.rlink" (click)="brandButtonClick()" >
        {{ configData.Brand.name }}
      </button>
  </div>


  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
          aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExample04">
    <ul class="navbar-nav mr-auto">

      <li class="nav-item" *ngFor="let menu of configData.Menu">
          <div *ngIf="menu.visible && !menu.dropdown">
              <li class="nav-item">
                <button [ngClass]="navbarBrandClass" [routerLink]="menu.rlink" (click)="menuButtonClick($event)">
                    {{ menu.title }}
                </button>
              </li>
          </div>
          <div *ngIf="menu.visible && menu.dropdown">
              <div ngbDropdown class="d-inline-block">
                <button [ngClass]="navbarBrandClass" id="dropdownBasic1" ngbDropdownToggle>
                  {{ menu.title }}
                </button>

                <div class="dropdown-menu" aria-labelledby="dropdown04" ngbDropdownMenu>
                    <div  *ngFor="let smenu of menu.submenu">
                        <button class="dropdown-item" [routerLink]="smenu.rlink" (click)="submenuButtonClick($event)">{{ smenu.title }}</button>
                    </div>
                </div>
              </div>
          </div>
        </li>
    </ul>

    <div *ngIf="configData.Search.visible">
        <form class="form-inline my-2 my-md-0">
            <input class="form-control" type="text" id="search" name="search" placeholder="Search" [(ngModel)]="searchText">
            <button [ngClass]="searchButtonClass" (click)="searchButtonClick($event)">Search</button>
        </form>
    </div>
  </div>
</nav>