bia-framework/components/core-bar/core-bar.template.html

Bia Framework to work with angular 2

<div class="core-bar odisseiaanimation"
     [ngClass]="{ 'z-depth-1': hasDropShadown && contentVisibility}">

    <div class="core-bar-native grid grid-direction-columns-sm grid-vertical-center-sm grid-horizontal-end-sm ripple-container bg-color-primary"
         @animationSideSlide="nativeVisibility ? 'active':'inactive'" >

        <div (click)="nativeClick('minimize')" class="cell wrapper-sm m-r selectable" ripple rippleColor="primary-100" rippleSize="i" rippleMousePosition="true" >
            <core-icon source="window_minimize" color="white" size="xxsm"></core-icon>
        </div>

        <div class="cell wrapper-sm m-r selectable" ripple rippleColor="primary-100" rippleSize="i" rippleMousePosition="true" >
            <core-icon (click)="nativeClick('toggle')" source="window_restore" color="white" size="xxsm"></core-icon>
        </div>

        <div (click)="nativeClick('close')" class="cell wrapper-sm selectable" ripple rippleColor="primary-100" rippleSize="i" rippleMousePosition="true" >
            <core-icon source="window_close" color="white" size="xxsm"></core-icon>
        </div>

    </div>

    <div class="core-bar-content bg-color-primary" @animationSideSlide="contentVisibility ? 'active':'inactive'" >

        <div class="grid grid-direction-columns-sm grid-vertical-start-sm grid-full-h ">

            <!--Left Menus-->
            <div class="cell cell-sm-4 cell-horizontal-center-sm cell-vertical-center-sm">

                <div class="grid grid-direction-columns-sm grid-vertical-center-sm m-l-sm">
                    <div class="cell">
                        <div class="grid grid-direction-rows-sm grid-vertical-start-sm m-r-md">

                            <div *ngFor="let item of LeftMenuItems"
                                 class="cell cell-vertical-center-sm core-bar-item"
                                 (click)="itemClicked(item)">
                                <core-icon source="{{item.icon}}" color="{{item.IconColor}}" size="xxsm" *ngIf="item.icon"></core-icon>
                                <badge [isVisible]="item.ShowBadge" [count]="item.BadgeCount" [position]="'bottom-right'"></badge>
                                <i class="status bg-color-{{item.StatusColor}}" [ngClass]="{show:item.ShowStatus}"></i>
                            </div>

                        </div>


                    </div>
                    <div class="cell">
                        <span class="text text-subhead-1 text-color-white">{{TitleBar}}</span>
                    </div>
                </div>
            </div>

            <!--Center Logo-->
            <div class="cell cell-auto cell-horizontal-center-sm cell-vertical-center-sm">
                <div #coreBarDynContainer></div>
            </div>

            <!--Right Menus-->
            <div class="cell cell-sm-4 cell-full-h m-r">

                <div class="grid grid-direction-columns-sm grid-horizontal-end-sm  grid-vertical-center-sm grid-full-h m-r-md">

                    <!--TODO-->
                    <!--dropdown menus-->
                    <div *ngFor="let dropItem of DropdownMenus"
                         class="cell cell-vertical-center-sm cell-full-h core-bar-item">
                        <div class="grid grid-direction-columns-sm grid-full-h">
                            <div class="cell cell-full-h cell-vertical-center-sm">
                                <!--<core-dropdown-menu-->
                                        <!--name="profileControl"-->
                                        <!--color="white"-->
                                        <!--[description]="dropItem.header"-->
                                        <!--[source]="dropItem.source"-->
                                        <!--[show-value-path]="dropItem.showValuePath"-->
                                        <!--[show-selected-as-description]="false">-->
                                <!--</core-dropdown-menu>-->
                            </div>

                        </div>
                    </div>


                    <div *ngFor="let item of RightMenuItems" class="cell cell-vertical-center-sm core-bar-item cell-full-h"
                         (click)="itemClicked(item)">
                        <div class="grid grid-direction-columns-sm grid-vertical-center-sm" *ngIf="item.Show">
                            <div class="cell wrapper-sm">
                                <core-icon source="{{item.Icon}}" color="{{item.IconColor}}" size="xxsm"
                                           *ngIf="item.Icon"></core-icon>
                            </div>
                            <div class="cell"><span
                                    class="text text-color-{{item.IconColor}} text-menu">{{item.Nome}}</span></div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>


    <div class="core-bar-bg bg-color-primary z-depth-1" [ngClass]="{ visible : hasBarBg }"></div>
</div>