
  <ul class="nav" ui-nav>
    <li class="nav-header hidden-folded">
      <small class="text-muted">Main</small>
    </li>
    
    <li ui-sref-active="active">
      <a ui-sref="app.dashboard">
        <span class="nav-icon">
          <i class="material-icons">&#xe3fc;
            <span ui-include="'../assets/images/i_0.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Dashboard</span>
      </a>
    </li>

    <li>
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-label">
          <b class="label rounded label-sm {{app.setting.theme.warn}}">5</b>
        </span>
        <span class="nav-icon">
          <i class="material-icons">&#xe5c3;
            <span ui-include="'../assets/images/i_1.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Apps</span>
      </a>
      <ul class="nav-sub">
        <li ui-sref-active="active">
          <a ui-sref="app.inbox.list">
            <span class="nav-text">Inbox</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.contact">
            <span class="nav-text">Contacts</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.calendar">
            <span class="nav-text">Calendar</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.note.list">
            <span class="nav-text">Note</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.todo">
            <span class="nav-text">Todo</span>
          </a>
        </li>
      </ul>
    </li>

    <li ng-class="{active:$state.includes('app.layout')}">
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-icon">
          <i class="material-icons">&#xe8f0;
            <span ui-include="'../assets/images/i_2.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Layouts</span>
      </a>
      <ul class="nav-sub">
        <li ui-sref-active="active">
          <a ui-sref="app.layout.header">
            <span class="nav-text">Header</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.layout.aside">
            <span class="nav-text">Aside</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.layout.footer">
            <span class="nav-text">Footer</span>
          </a>
        </li>
      </ul>
    </li>

    <li ui-sref-active="active">
      <a ui-sref="app.widget">
        <span class="nav-icon">
          <i class="material-icons">&#xe8d2;
            <span ui-include="'../assets/images/i_3.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Widgets</span>
      </a>
    </li>

    <li class="nav-header hidden-folded">
      <small class="text-muted">Components</small>
    </li>

    <li ng-class="{active:$state.includes('app.ui')}">
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-label">
          <b class="label label-sm {{app.setting.theme.accent}}">8</b>
        </span>
        <span class="nav-icon">
          <i class="material-icons">&#xe429;
            <span ui-include="'../assets/images/i_4.svg'"></span>
          </i>
        </span>
        <span class="nav-text">UI kit</span>
      </a>
      <ul class="nav-sub nav-mega nav-mega-3">
        <li ui-sref-active="active">
          <a ui-sref="app.ui.angularstrap">
            <span class="nav-text">AngularStrap</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.bootstrap">
            <span class="nav-text">UI Bootstrap</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.arrow">
            <span class="nav-text">Arrow</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.box">
            <span class="nav-text">Box</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.button">
            <span class="nav-text">Button</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.color">
            <span class="nav-text">Color</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.dropdown">
            <span class="nav-text">Dropdown</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.grid">
            <span class="nav-text">Grid</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.icon">
            <span class="nav-text">Icon</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.label">
            <span class="nav-text">Label</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.list">
            <span class="nav-text">List Group</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.modal">
            <span class="nav-text">Modal</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.nav">
            <span class="nav-text">Nav</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.progress">
            <span class="nav-text">Progress</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.social">
            <span class="nav-text">Social</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.sortable">
            <span class="nav-text">Sortable</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.streamline">
            <span class="nav-text">Streamline</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.timeline">
            <span class="nav-text">Timeline</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.ui.vectormap">
            <span class="nav-text">Vector Map</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.googlemap">
            <span class="nav-text">Google Map</span>
          </a>
        </li>
      </ul>
    </li>

    <li ng-class="{active:$state.includes('app.page')}">
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-label"><b class="label no-bg">9</b></span>
        <span class="nav-icon">
          <i class="material-icons">&#xe3e8;
            <span ui-include="'../assets/images/i_5.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Pages</span>
      </a>
      <ul class="nav-sub nav-mega">
        <li ui-sref-active="active">
          <a ui-sref="app.page.profile">
            <span class="nav-text">Profile</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.setting">
            <span class="nav-text">Setting</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.search">
            <span class="nav-text">Search</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.faq">
            <span class="nav-text">FAQ</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.gallery">
            <span class="nav-text">Gallery</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.invoice">
            <span class="nav-text">Invoice</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.price">
            <span class="nav-text">Price</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.page.blank">
            <span class="nav-text">Blank</span>
          </a>
        </li>
        <li>
          <a ui-sref="access.signin">
            <span class="nav-text">Sign In</span>
          </a>
        </li>
        <li>
          <a ui-sref="access.signup">
            <span class="nav-text">Sign Up</span>
          </a>
        </li>
        <li>
          <a ui-sref="access.forgot-password">
            <span class="nav-text">Forgot Password</span>
          </a>
        </li>
        <li>
          <a ui-sref="access.lockme">
            <span class="nav-text">Lockme Screen</span>
          </a>
        </li>
        <li>
          <a ui-sref="404">
            <span class="nav-text">Error 404</span>
          </a>
        </li>
        <li>
          <a ui-sref="505">
            <span class="nav-text">Error 505</span>
          </a>
        </li>
      </ul>
    </li>

    <li ng-class="{active:$state.includes('app.form')}">
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-icon">
          <i class="material-icons">&#xe39e;
            <span ui-include="'../assets/images/i_6.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Form</span>
      </a>
      <ul class="nav-sub">
        <li ui-sref-active="active">
          <a ui-sref="app.form.layout">
            <span class="nav-text">Form Layout</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.element">
            <span class="nav-text">Form Element</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.validation">
            <span class="nav-text">Form Validation</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.select">
            <span class="nav-text">Select</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.editor">
            <span class="nav-text">Editor</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.slider">
            <span class="nav-text">Slider</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.tree">
            <span class="nav-text">Tree</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.file-upload">
            <span class="nav-text">File Upload</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.image-crop">
            <span class="nav-text">Image Crop</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.form.editable">
            <span class="nav-text">Editable</span>
          </a>
        </li>
      </ul>
    </li>

    <li ng-class="{active:$state.includes('app.table')}">
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-icon">
          <i class="material-icons">&#xe896;
            <span ui-include="'../assets/images/i_7.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Tables</span>
      </a>
      <ul class="nav-sub">
        <li ui-sref-active="active">
          <a ui-sref="app.table.static">
            <span class="nav-text">Static table</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.table.datatable">
            <span class="nav-text">Datatable</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.table.footable">
            <span class="nav-text">Footable</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.table.smart">
            <span class="nav-text">Smart table</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.table.uigrid">
            <span class="nav-text">UI Grid</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a ui-sref="app.table.editable">
            <span class="nav-text">Editable</span>
          </a>
        </li>
      </ul>
    </li>
    <li ui-sref-active="active">
      <a>
        <span class="nav-caret">
          <i class="fa fa-caret-down"></i>
        </span>
        <span class="nav-label hidden-folded">
          <b class="label label-sm info">N</b>
        </span>
        <span class="nav-icon">
          <i class="material-icons">&#xe1b8;
            <span ui-include="'../assets/images/i_8.svg'"></span>
          </i>
        </span>
        <span class="nav-text">Charts</span>
      </a>
      <ul class="nav-sub">
        <li ui-sref-active="active">
          <a ui-sref="app.chart">
            <span class="nav-text">Chart</span>
          </a>
        </li>
        <li ui-sref-active="active">
          <a>
            <span class="nav-caret">
              <i class="fa fa-caret-down"></i>
            </span>
            <span class="nav-text">Echarts</span>
          </a>
          <ul class="nav-sub">
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.line">
                <span class="nav-text">line</span>
              </a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.bar">
                <span class="nav-text">Bar</span>
              </a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.pie">
                <span class="nav-text">Pie</span>
              </a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.scatter">
                <span class="nav-text">Scatter</span>
              </a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.rc">
                <span class="nav-text">Radar &amp; Chord</span>
              </a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.gf">
                <span class="nav-text">Gauges &amp; Funnel</span>
              </a>
            </li>
            <li ui-sref-active="active">
              <a ui-sref="app.echarts.map">
                <span class="nav-text">Map</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>

    <li class="nav-header hidden-folded">
      <small class="text-muted">Help</small>
    </li>
    
    <li class="hidden-folded" ui-sref-active="active">
      <a ui-sref="app.docs">
        <span class="nav-text">Documents</span>
      </a>
    </li>

  </ul>
