cobuild-angular-stack/app/views/shared.header.html

Base stack angular sass jade gulp

<div class="container-fluid" ng-class="{'nav-admin':isAdmin}">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" ng-if="isAuthenticated && !isAdmin">
            <li ui-sref-active-eq="active" class="navbar-header pull-left">
                <a ui-sref="home" class="navbar-brand">Uniko</a>
            </li>
            <li ui-sref-active-eq="active" style="margin-left: 90px;"><a ui-sref="registry">{{'table' | translate}} </a>
            </li>
            <li ui-sref-active-eq="active"><a ui-sref="products">{{'catalog' | translate}} </a></li>
            <li ui-sref-active-eq="active"><a href="http://blog.unikodf.com/">{{'inspiration' | translate}} </a></li>
            <li ui-sref-active-eq="active" class="pull-right"
                style="font-size: 26px;position: relative">
                <span uib-dropdown>
                  <a id="user-option-dropdown"
                     style="line-height: 50px;width: 70px;display: inline-block; background: none" href
                     uib-dropdown-toggle>
                      <i class="fa fa-user" aria-hidden="true"></i>
                  </a>
                  <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="user-option-dropdown"
                      style="right: -1px; left: initial;margin-top: 9px;background: #ECECED; font-size: 12px; padding: 0">
                      <li>
                          <a style="color: #A7B1B2!important; font-weight: bold;padding: 8px 25px;"
                             ui-sref="homeUser.profile">{{'your-data' | translate}}</a>
                      </li>
                      <li><a style="color: #A7B1B2!important; font-weight: bold;padding: 8px 25px;"
                             href="javascript:void(0)">{{'your-photos' | translate}}</a>
                      </li>
                      <li><a style="color: #A7B1B2!important; font-weight: bold;padding: 8px 25px;" ui-sref="gifts">{{'gifts-received'
                          | translate}}</a>
                      </li>
                      <li><a style="color: #A7B1B2!important; font-weight: bold;padding: 8px 25px;"
                             ui-sref="homeUser.pay">{{'payment-account' | translate}}</a>
                      </li>
                      <li><a style="color: #A7B1B2!important; font-weight: bold;padding: 8px 25px;" ui-sref="cashout">{{'retirement-money'
                          | translate}}</a>
                      </li>
                      <li><a style="color: #A7B1B2!important; font-weight: bold;padding: 8px 25px;"
                             href="javascript:void(0)">{{'help' | translate}}</a>
                      </li>
                      <li style="background: #CCC;padding: 5px 10px;text-align: center">
                          <a style="color: #FFF!important; font-weight: bold;padding: 8px 15px; background-color: #81C6CA"
                             ui-sref="logout">{{'log-out' | translate}}</a>
                      </li>
                  </ul>
                </span>
            </li>
            <li class="pull-right"
                style="padding: 6px; margin-top: 9px; display: inline-block; background: #3FABB1;"
                ng-controller="GiftReceivedController"
            >
                <span>{{cantReceived|currency:'MXN ':2}}</span>
            </li>
        </ul>
        <ul class="nav navbar-nav" ng-if="isAuthenticated && isAdmin">

            <li ui-sref-active-eq="active" class="navbar-header pull-left">
                <a ui-sref="home" class="navbar-brand"><span class="title-uniko">UNIKO</span> <span>ADMIN</span></a>
            </li>
            <li ui-sref-active-eq="active" class=" pull-left"><a ui-sref="admin.coupleAccounts"><i
                    class="fa fa-users"></i> {{'couples' | translate}}</a></li>
            <li ui-sref-active-eq="active" class=" pull-left"><a ui-sref="admin.orders"><i
                    class="fa fa-book"></i> {{'orders' | translate}}</a></li>
            <li ui-sref-active-eq="active" ng-if="role == 'admin' || role == 'customer-service' || role =='analitic'" class=" pull-left"><a ui-sref="admin.cashout"><i
                    class="fa fa-money"></i> {{'retirements' | translate}}</a></li>
            <li ui-sref-active-eq="active" ng-if="role == 'admin' || role == 'customer-service' || role =='analitic' || role == 'partner'" class="pull-left"><a class="text-capitalize" ui-sref="admin.onboardings"><i
                    class="fa fa-clone"></i> {{'onboarding' | translate}}</a></li>
            <li ng-class="{active: $state.includes('admin.discount.categories') || $state.includes('admin.discount.subcategories')}" ng-if="role == 'admin' || role == 'customer-service' || role =='analitic' || role == 'partner'" class="pull-left"><a class="text-capitalize" ui-sref="admin.discount.categories"><i
                    class="fa fa-barcode"></i> {{'code-discount' | translate}}</a></li>
            <li ng-class="{active: $state.includes('admin.settings') || $state.includes('admin.products') || $states.includes('admin.banners') || $state.includes('admin.settings.accounts') || $state.includes('admin.categories') || $state.includes('admin.tcs') }"  class=" pull-left" ng-if="role == 'admin' || role == 'customer-service' || role =='analitic' || role =='partner'">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false" >
                    {{'settings' | translate}} <span class="caret"></span>
                </a>
                    <ul class="dropdown-menu">
                        <li ui-sref-active-eq="active" ng-if="role == 'admin' || role == 'customer-service' || role =='analitic'">
                            <a ui-sref="admin.settings" ><i class="fa fa-cog"></i>  {{'General' | translate}}</a>
                        </li>
                        <li ui-sref-active-eq="active" ng-if="role == 'admin'">
                            <a ui-sref="admin.settings.accounts" ><i class="fa fa-users"></i>  {{'Usuarios' | translate}}</a>
                        </li>
                         <li ui-sref-active-eq="active" ng-if="role == 'admin' || role == 'customer-service' || role =='analitic' || role == 'partner'">
                            <a ui-sref="admin.categories" ><i class="glyphicon glyphicon-list-alt"></i>   {{'categories' | translate}} & {{'stores' | translate}}</a>
                        </li>
                         <li ng-if="role == 'admin' || role == 'customer-service'">
                            <a ui-sref-active-eq="active" ui-sref="admin.tcs" ><i class="glyphicon glyphicon-file"></i>  {{'terms' | translate}}</a>
                        </li>
                        <li ng-if="role == 'admin' || role == 'customer-service'">
                                <a ui-sref-active-eq="active" ui-sref="admin.experiences" ><i class="glyphicon glyphicon-file"></i>  {{'experiences' | translate}}</a>
                        </li>
                        <li ui-sref-active-eq="active"><a ui-sref="admin.banners"><i
                    class="fa fa-picture-o"></i> {{'cover-photo' | translate}}</a></li>
                    <li ui-sref-active-eq="active" class=" pull-left"><a ui-sref="admin.products"><i
                    class="fa fa-gift"></i> {{'products' | translate}}</a></li>
                    </ul>
            </li>
            <li ui-sref-active-eq="active" class="pull-right">
                 <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false" >
                    {{ name }} <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a ui-sref="admin.logout"><i class="glyphicon glyphicon-off"></i> {{ ' log-out' | translate}}</a>
                    </li>
                </ul>
        </li>
        </ul>
        <ul class="nav navbar-nav" ng-if="!isAuthenticated">
            <li ui-sref-active-eq="active" class="navbar-header pull-left">
                <a ui-sref="home" class="navbar-brand">Uniko</a>
            </li>
            <li ui-sref-active-eq="active">
                <a ui-sref="search_table">{{'search_tablef' | translate}} </a>
            </li>
            <li ui-sref-active-eq="active" class="pull-right">
                <a ui-sref="login">{{'log-in' | translate}}</a>
            </li>
            <li class="pull-right"
                style="padding: 6px 16px; margin-top: 9px; display: inline-block; background: #3FABB1;"
                ng-controller="CartController">
                <a style="padding: 0" ui-sref="guest.checkout.cart({url: cartUrl})">
                    <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
                    <span style="display: inline-block; line-height: 20px; width: 20px; border-radius: 50%; background-color: red">{{totalCart}}</span></a>
            </li>

        </ul>
    </div>
</div>