<a class="sidemenu__logo" ng-click="ctrl.toggleSideMenu()">
  <img src="public/img/grafana_icon.svg"></img>
</a>

<a class="sidemenu__logo_small_breakpoint" ng-click="ctrl.toggleSideMenuSmallBreakpoint()">
  <i class="fa fa-bars"></i>
  <span class="sidemenu__close">
    <i class="fa fa-times"></i>&nbsp;Close</span>
</a>

<div class="sidemenu__top">
  <div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
    <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
      <span class="icon-circle sidemenu-icon">
        <i class="{{::item.icon}}" ng-show="::item.icon"></i>
        <img ng-src="{{::item.img}}" ng-show="::item.img">
      </span>
    </a>
    <ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
      <li class="side-menu-header">
        <span class="sidemenu-item-text">{{::item.text}}</span>
      </li>
      <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
        <a href="{{::child.url}}">
          <i class="{{::child.icon}}" ng-show="::child.icon"></i>
          {{::child.text}}
        </a>
      </li>
    </ul>
  </div>
</div>

<div class="sidemenu__bottom">
  <div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
    <a href="{{ctrl.loginUrl}}" class="sidemenu-link" target="_self">
      <span class="icon-circle sidemenu-icon">
        <i class="fa fa-fw fa-sign-in"></i>
      </span>
    </a>
    <a href="{{ctrl.loginUrl}}" target="_self">
      <ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
        <li class="side-menu-header">
          <span class="sidemenu-item-text">Sign In</span>
        </li>
      </ul>
    </a>
  </div>

  <div ng-repeat="item in ::ctrl.bottomNav" class="sidemenu-item dropdown dropup">
    <a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
      <span class="icon-circle sidemenu-icon">
        <i class="{{::item.icon}}" ng-show="::item.icon"></i>
        <img ng-src="{{::item.img}}" ng-show="::item.img">
      </span>
    </a>
    <ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
      <li ng-if="item.subTitle" class="sidemenu-subtitle">
        <span class="sidemenu-item-text">{{::item.subTitle}}</span>
      </li>
      <li ng-if="item.showOrgSwitcher" class="sidemenu-org-switcher">
        <a ng-click="ctrl.switchOrg()">
          <div>
            <div class="sidemenu-org-switcher__org-name">{{ctrl.contextSrv.user.orgName}}</div>
            <div class="sidemenu-org-switcher__org-current">Current Org:</div>
          </div>
          <div class="sidemenu-org-switcher__switch">
            <i class="fa fa-fw fa-random"></i>Switch</div>
        </a>
      </li>
      <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}" ng-hide="::child.hideFromMenu">
        <a href="{{::child.url}}" target="{{::child.target}}" ng-click="ctrl.itemClicked(child, $event)">
          <i class="{{::child.icon}}" ng-show="::child.icon"></i>
          {{::child.text}}
        </a>
      </li>
      <li class="side-menu-header">
        <span class="sidemenu-item-text">{{::item.text}}</span>
      </li>
    </ul>
  </div>
</div>