workplacex-cli/Framework.Cli/Template/Application.Website/src/app/bulma-navbar/bulma-navbar.component.html

Create database applications with Angular 11, ASP.NET Core 5.0 and MS-SQL for Linux and Windows.

<nav class="navbar is-info" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#" (click)="clickHome()">
        <span [innerHtml]="json.BrandTextHtml"></span>
        <span *ngIf="json.IsShowSpinner">&nbsp;<i class="fas fa-spinner fa-spin"></i></span>
      </a>
  
      <a #burger role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" (click)="clickBurger()">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
  
    <ng-template #itemTemplate let-item>
      <!-- Level0 -->
      <ng-container [ngSwitch]="item.ItemEnum">
        <!-- Link -->
        <a *ngSwitchCase="1" class="navbar-item" [ngClass]="{'is-active':item.IsActive}" href="{{item.NavigatePath}}" (click)="click(item)">
          <span [innerHtml]="item.TextHtml"></span>
          <span *ngIf="item.IsShowSpinner">&nbsp;<i class="fas fa-spinner fa-spin"></i></span>
        </a>
        <!-- Input -->
        <a *ngSwitchCase="3" class="navbar-item is-active">
          <input class="input" type="text" [(ngModel)]="item.FilterText" (ngModelChange)="filterTextChange(item)" placeholder="{{item.FilterPlaceholder}}">
          <span class="icon" *ngIf="item.IsShowSpinner">&nbsp;<i class="fas fa-spinner fa-spin"></i></span>
        </a>
        <!-- DropDown -->
        <div *ngSwitchCase="4" #dropDown class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" (click)="click(item)">
            <span [innerHtml]="item.TextHtml"></span>
            <span *ngIf="item.IsShowSpinner">&nbsp;<i class="fas fa-spinner fa-spin"></i></span>
          </a>
          <!-- Level1 -->
          <div class="navbar-dropdown">
            <ng-container *ngFor="let item of item.ItemList; trackBy trackBy">
              <ng-container [ngSwitch]="item.ItemEnum">
                <a *ngSwitchCase="1" class="navbar-item" [ngClass]="{'is-active':item.IsActive}" href="{{item.NavigatePath}}" (click)="click(item)">
                  <span [innerHtml]="item.TextHtml"></span>
                  <span *ngIf="item.IsShowSpinner">&nbsp;<i class="fas fa-spinner fa-spin"></i></span>
                </a>
              </ng-container>
            </ng-container>
          </div>
        </div>
      </ng-container>
    </ng-template>
  
    <div #burgerTarget class="navbar-menu">
      <div class="navbar-start">
        <ng-container *ngFor="let item of json.ItemStartList; trackBy trackBy">
          <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
        </ng-container>
      </div>
  
      <div class="navbar-end">
        <ng-container *ngFor="let item of json.ItemEndList; trackBy trackBy">
          <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
        </ng-container>
      </div>
    </div>
  </nav>