<ion-side-menus enable-menu-with-back-views="false" ng-controller="MenuController">

  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
      
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>  
    </ion-nav-bar>

    <ion-nav-view name="menuContent">      
    </ion-nav-view>

  </ion-side-menu-content> 

  <ion-side-menu side="left">
    <ion-content scroll="false" padding="false">
      <icon-panel>
        <div id="user-info-block">
          <div class="info-left">
            <div class="user-logo">
              <img src="{{userInfo.logo}}" />
            </div>
            <div class="user-info">
              <!--table>
                <tr>
                  <td>{{userInfo.name}}</td>
                </tr>
                <tr>
                  <td>{{userInfo.unit}}</td>
                </tr>
              </table-->
              <div class="top-name">
                {{userInfo.name}} <span class="job">{{userInfo.job}}</span>
              </div>
              <div class="bottom-unit">
                {{userInfo.department}}
              </div>
            </div>
          </div>
          <div class="info-right"></div>
        </div>
      </icon-panel>
      <style>
        #user-info-block {
          display: block;
          width: 100%;
          height: 15%;
        }
        #user-info-block .info-left {
            width: 90%;
            margin-left: 7%;
            margin-right: 3%;
            height: 92%;
            margin-top: 8%;
        }
        #user-info-block .user-logo{
          width: 20%;
          height: 100%;
          display: inline-block;
          float: left;
        }
        #user-info-block .user-logo img{
          width: 100%;
          height: 100%;
        }
        #user-info-block .user-info{
          display: inline-block;
          width: 77%;
          margin-left: 3%;
          height: 100%;
        }
        #user-info-block .top-name{
          display: block;
          width: 100%;
          height: 50%;
          line-height: 300%;
          font-size: 1.7em;
        }
        #user-info-block .top-name .job{
          line-height: 300%;
          font-size: 0.5em;
          color: #999;
          padding-left: 0.5em;
        }
        #user-info-block .bottom-unit{
          display: block;
          width: 100%;
          height: 50%;
          line-height: 350%;
          font-size: 0.7em;
          color: #999;
        }
        #user-info-block {

        }
      </style>
      <ion-scroll style="width:100%;height:70%;" direction="y" has-bouncing="true" zooming="false">
        <ul class="list" style="margin-bottom:40px;">
          <a menu-close ng-click="selectItem(item);" ng-class="{'menu-item-selected':(item.selected)}" href="{{item.href}}" class="br-menu-item item icon icon-right ion-chevron-right" ng-repeat="item in menuItems">{{item.title}}</a>        
        </ul>
      </ion-scroll>
      <icon-panel>
        <div style="display:block;height:10%;width:100%;position:absolute;bottom:1px;left:0px;">
          <table width="100%" height="100%">
            <tr height="100%">
              <td height="100%" style="vertical-align:middle;" align="center">
                  <div style="width: 70%;margin-left:15%;margin-right:15%;" class="menu-bottom">
                    <div class="icon ion-gear-b icon-right" ng-click="goSettingPage();" style="display:inline-block;float:left;">
                      设置
                    </div>
                    <div class="icon icon-right ion-chevron-right" style="display:inline-block;float:right;">
                      其他
                    </div>
                  </div>
              </td>
            </tr>
          </table>
        </div>
      </icon-panel>
    </ion-content>
  </ion-side-menu>

</ion-side-menus>
<style>
  .menu-item-selected{
    background-color: gainsboro;
  }
  .br-menu-item:before {
    padding-right: 1rem;
  }

  .menu-bottom .ion-gear-b:active{
    color: #999;
  }
</style>