<div class="layout-topbar">

    <a routerLink="/" *ngIf="app.isHorizontal() && !app.isMobile()" class="topbar-logo">
        <img alt="logo" src="assets/images/logo.png" />
        <span class="app-name"></span>
    </a>

    <a routerLink="/">
        <img alt="logo" src="assets/images/logo.png" class="mobile-logo" />
    </a>

    <!-- <a href="#" class="menu-btn" (click)="app.onMenuButtonClick($event)">
        <i class="material-icons">&#xE5D2;</i>
    </a> -->

    <a href="javascript:;" class="topbar-menu-btn" (click)="app.onTopbarMobileMenuButtonClick($event)" *ngIf="showMenu">
        <i class="material-icons">&#xE5D2;</i>
    </a>

    <div class="layout-topbar-menu-wrapper" *ngIf="showMenu">
        <ul class="topbar-menu fadeInDown" [ngClass]="{'topbar-menu-active': app.topbarMenuActive}" (click)="app.onTopbarMenuClick($event)">
            <li *ngFor="let menuItem of mainMenuItems; let i = index" [attr.id]="menuItem.id" [ngClass]="{'active-topmenuitem': app.activeTopbarItem === menuItem, 'user-menu': (i===0)}"
                (click)="app.onTopbarRootItemClick($event, menuItem)">
                <a href="{{menuItem.url}}" *ngIf="menuItem.url && (menuItem.Badge == undefined || menuItem.Badge > 0)" title="{{menuItem.title ? menuItem.title : menuItem.label}}">
                    <i [ngClass]="{'topbar-icon': true, 'material-icons': true, 'badge-icon': menuItem.Badge}" *ngIf="menuItem.icon">{{menuItem.icon}}</i>
                    <span [ngClass]="{'show-topbar-item-name': !menuItem.Badge, 'topbar-item-name': menuItem.Badge}" [innerHTML]="menuItem.label | safe: 'html'"></span>
                    <span class="topbar-badge animated rubberBand" *ngIf="menuItem.Badge">{{menuItem.Badge}}</span>
                </a>
                <a [routerLink]="menuItem.routerLink" *ngIf="menuItem.routerLink && (menuItem.Badge == undefined || menuItem.Badge > 0)" title="{{menuItem.title ? menuItem.title : menuItem.label}}">
                    <i [ngClass]="{'topbar-icon': true, 'material-icons': true, 'badge-icon': menuItem.Badge}" *ngIf="menuItem.icon">{{menuItem.icon}}</i>
                    <span [ngClass]="{'show-topbar-item-name': !menuItem.Badge, 'topbar-item-name': menuItem.Badge}" [innerHTML]="menuItem.label | safe: 'html'"></span>
                    <span class="topbar-badge animated rubberBand" *ngIf="menuItem.Badge">{{menuItem.Badge}}</span>
                </a>
                <a href="javascript:;" *ngIf="(menuItem && menuItem.items && menuItem.items.length > 0 && !menuItem.url && !menuItem.routerLink)"
                    title="{{menuItem.title ? menuItem.title : menuItem.label}}">
                    <i class="topbar-icon material-icons" *ngIf="menuItem.icon">{{menuItem.icon}}</i>
                    <span class="show-topbar-item-name" [innerHTML]="menuItem.label | safe: 'html'"></span>
                    <span class="caret"></span>
                </a>
                <ul class="fadeInDown" *ngIf="(menuItem && menuItem.items && menuItem.items.length > 0 && !menuItem.url && !menuItem.routerLink)">
                    <ng-container *ngFor="let subMenuItem of menuItem.items">
                        <li role="menuitem" *ngIf="subMenuItem.routerLink || subMenuItem.url" [attr.id]="subMenuItem.id">
                            <a [routerLink]="subMenuItem.routerLink" *ngIf="subMenuItem.routerLink">
                                <i class="material-icons" *ngIf="subMenuItem.icon">{{subMenuItem.icon}}</i>
                                <span [innerHTML]="subMenuItem.label | safe: 'html'"></span>
                            </a>
                            <a href="{{subMenuItem.url}}" *ngIf="subMenuItem.url">
                                <i class="material-icons" *ngIf="subMenuItem.icon">{{subMenuItem.icon}}</i>
                                <span [innerHTML]="subMenuItem.label | safe: 'html'"></span>
                            </a>
                        </li>
                    </ng-container>
                    <ng-container *ngFor="let subMenuItem of menuItem.items">
                        <ng-container *ngIf="!subMenuItem.routerLink && !subMenuItem.url && subMenuItem.items.length > 0">
                            <li class="divider"></li>
                            <li class="subnav">
                                <i class="material-icons" *ngIf="subMenuItem.icon">{{subMenuItem.icon}}</i>
                                <span [innerHTML]="subMenuItem.label | safe: 'html'"></span>
                            </li>
                            <li role="menuitem" *ngFor="let subSubMenuItem of subMenuItem.items" [attr.id]="subSubMenuItem.id">
                                <a [routerLink]="subSubMenuItem.routerLink" *ngIf="subSubMenuItem.routerLink">
                                    <i class="material-icons" *ngIf="subSubMenuItem.icon">{{subSubMenuItem.icon}}</i>
                                    <span [innerHTML]="subSubMenuItem.label | safe: 'html'"></span>
                                </a>
                                <a href="{{subSubMenuItem.url}}" *ngIf="subSubMenuItem.url">
                                    <i class="material-icons" *ngIf="subSubMenuItem.icon">{{subSubMenuItem.icon}}</i>
                                    <span [innerHTML]="subSubMenuItem.label | safe: 'html'"></span>
                                </a>
                            </li>
                        </ng-container>
                    </ng-container>
                </ul>
            </li>
        </ul>
    </div>
</div>