bansho/app/components/sidebar/sidebar.html

<div class="sidebar" ng-controller="SideBarCtrl">
  <button class="sidebar__close">
    <span class="visuallyhidden">Close the sidebar</span>
    <i class="ico-cancel"></i>
  </button>

  <header class="sidebar__header">
      <img class="sidebar__applogo" ng-src="assets/images/surveil-{{themeColor}}-horizontal.svg">
  </header>

  <nav class="sidebar__nav" role="navigation">
    <ul class="sidebar__list" id="sidebarList">
      <li class="sidebar__item">
        <button class="sidebar__category"
                data-toggle="collapse"
                data-target="#shortcutList"
                aria-expanded="true"
                aria-controls="shortcutList">Shortcut</button>
        <button class="sidebar__customize ico-cog">
          <span class="visuallyhidden">Customize the shortcut category</span>
        </button>

        <ul class="sidebar__sublist collapse in" id="shortcutList">
          <li class="sidebar__subitem"><a ng-class="getClass('/view')" href="#/view">Dashboard</a></li>
          <li class="sidebar__subitem"><a ng-class="getClass('/view?view=liveHosts')" href="#/view?view=liveHosts">Hosts</a></li>
          <li class="sidebar__subitem"><a ng-class="getClass('/view?view=liveServices')" href="#/view?view=liveServices">Services</a></li>
          <li class="sidebar__subitem"><a href="#">Networks parents</a></li>
        </ul>
      </li>
      <li class="sidebar__item">
        <button class="sidebar__category"
                data-toggle="collapse"
                data-target="#reportsList"
                aria-expanded="true"
                aria-controls="reportsList">Config Objects</button>
        <button class="sidebar__customize ico-cog">
          <span class="visuallyhidden">Customize the config objects category</span>
        </button>
        <ul class="sidebar__sublist collapse in" id="configList">
          <li class="sidebar__subitem"><a href="#/view?view=configHosts">Host</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=configHostsTemplate">Templates</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=configServices">Services</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=commands">Commands</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=businessimpactmodulations">BusinessImpactModulation</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=checkmodulations">CheckModulation</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=contacts">Contacts</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=macromodulations">Macromodulation</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=notificationways">Notification Way</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=realms">Realm</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=timeperiods">Time periods</a></li>
        </ul>
      </li>
      <li class="sidebar__item">
        <button class="sidebar__category"
                data-toggle="collapse"
                data-target="#reportsList"
                aria-expanded="true"
                aria-controls="reportsList">Reports</button>
        <button class="sidebar__customize ico-cog">
          <span class="visuallyhidden">Customize the reports category</span>
        </button>

        <ul class="sidebar__sublist collapse in" id="reportsList">
          <li class="sidebar__subitem"><a href="#">State History</a></li>
          <li class="sidebar__subitem"><a ng-class="getClass('/view?view=liveEvents')" href="#/view?view=liveEvents">Events</a></li>
          <li class="sidebar__subitem"><a href="#">Comments</a></li>
          <li class="sidebar__subitem"><a href="#">Downtimes</a></li>
        </ul>
      </li>
      <li class="sidebar__item">
        <button class="sidebar__category"
                data-toggle="collapse"
                data-target="#groupsList"
                aria-expanded="true"
                aria-controls="groupsList">Groups</button>
        <button class="sidebar__customize ico-cog">
          <span class="visuallyhidden">Customize the groups category</span>
        </button>

        <ul class="sidebar__sublist collapse in" id="groupsList">
          <li class="sidebar__subitem"><a href="#/view?view=hostgroups">Host groups</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=servicegroups">Service Groups</a></li>
          <li class="sidebar__subitem"><a href="#/view?view=contactgroups">Contact Groups</a></li>
        </ul>
      </li>
      <li class="sidebar__item">
        <button class="sidebar__category"
                data-toggle="collapse"
                data-target="#otherList"
                aria-expanded="true"
                aria-controls="otherList">Other</button>
        <button class="sidebar__customize ico-cog">
          <span class="visuallyhidden">Customize other category</span>
        </button>

        <ul class="sidebar__sublist collapse in" id="otherList">
          <li class="sidebar__subitem"><a href="#">Grafana</a></li>
          <li class="sidebar__subitem"><a href="#">Nagvis</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <footer class="sidebar__profile">
    <a class="sidebar__profile__toggle" href="#profile">
      <span class="sidebar__profile__name">Jean-Michel <br>Vasquez-Peruz</span>
    </a>
  </footer>
</div>