<!-- navbar -->
<div class="app-header navbar">
    <!-- navbar header -->
    <div class="navbar-header {{app.settings.navbarHeaderColor}}">
        <button class="pull-right visible-xs dk" ui-toggle-class="show" data-target=".navbar-collapse">
            <i class="glyphicon glyphicon-cog"></i>
        </button>
        <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
            <i class="glyphicon glyphicon-align-justify"></i>
        </button>
        <!-- brand -->
        <a href="#/" class="navbar-brand text-lt">
            <i class="fa fa-credit-card"></i>
            <span class="hidden-folded m-l-xs">{{app.name}}</span>
        </a>
        <!-- / brand -->
    </div>
    <!-- / navbar header -->

    <!-- navbar collapse -->
    <div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">
        <!-- buttons -->
        <div class="nav navbar-nav hidden-xs">
            <a href class="btn no-shadow navbar-btn" ng-click="app.settings.asideFolded = !app.settings.asideFolded">
                <i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
            </a>
        </div>
        <!-- / buttons -->

        <!-- search form -->
        <form class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" target=".navbar-collapse"
              role="search" ng-controller="TypeaheadDemoCtrl">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" ng-model="selected"
                           typeahead="state for state in states | filter:$viewValue | limitTo:8"
                           class="form-control input-sm bg-light no-border rounded padder"
                           placeholder="Search projects...">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-sm bg-light rounded">
                            <i class="fa fa-search"></i>
                        </button>
                    </span>
                </div>
            </div>
        </form>
        <!-- / search form -->

        <!-- nabar right -->
        <ul class="nav navbar-nav navbar-right">
            <li class="hidden-xs">
                <a ui-fullscreen></a>
            </li>
            <li class="dropdown" dropdown>
                <a href class="dropdown-toggle clear" dropdown-toggle>
                    <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                        <img src="../img/a0.jpg" alt="...">
                        <i class="on md b-white bottom"></i>
                    </span>
                    <span class="hidden-sm hidden-md">{{loginData.username}}</span>
                    <b class="caret"></b>
                </a>
                <!-- dropdown -->
                <ul class="dropdown-menu animated fadeInRight w">
                    <li>
                        <a ng-click="logout()">Logout</a>
                    </li>
                </ul>
                <!-- / dropdown -->
            </li>
        </ul>
        <!-- / navbar right -->

    </div>
    <!-- / navbar collapse -->
</div>
<!-- / navbar -->

<!-- menu -->
<div class="app-aside hidden-xs {{app.settings.asideColor}}">
    <div class="aside-wrap">
        <!-- if you want to use a custom scroll when aside fixed, use the slimScroll
          <div class="navi-wrap" ui-jq="slimScroll" ui-options="{height:'100%', size:'8px'}">
        -->
        <div class="navi-wrap">

            <!-- nav -->
            <nav ui-nav class="navi">
                <!-- list -->
                <ul class="nav">
                    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
                        <span>导航</span>
                    </li>
                    <li ui-sref-active="active" ng-repeat="menu in menuList">
                        <a ui-sref="{{menu.url}}">
                            <i class="{{icons[$index]}}"></i>
                            <span class="font-bold">{{menu.name}}</span>
                        </a>
                    </li>
                    <li class="line dk"></li>
                </ul>
                <!-- / list -->
            </nav>
            <!-- nav -->
        </div>
    </div>
</div>
<!-- / menu -->

<!-- view -->
<div class="app-content" ng-class="{'m-n': app.hideAside, 'h-full': app.hideFooter }">

    <div ui-view></div>
</div>


<!-- / view -->

<!-- footer -->
<div class="app-footer wrapper b-t bg-white">
    <span class="pull-right">version:{{app.version}}</span>
    &copy; 2018 Copyright.
</div>
<!-- / footer -->