<nav class="nav__wrapper">
  <ul id="nav__top-level" ng-style="navStyle">
    <li>
      <a class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" href="#/overview/server" ng-click="change('overview')">
        <icon class="nav-icon" file="icon-overview.svg"></icon>
        Server overview
      </a>
    </li>
    <li>
      <button class="btn-health"
      ng-class="{opened: firstLevel == 'server-health'}"
      ng-click="change('server-health')">
        <icon class="nav-icon" file="icon-health.svg"></icon>
        Server health
      </button>
      <ul class="nav__second-level btn-health"
        ng-style="navStyle"
        ng-class="{opened: (showSubMenu && firstLevel == 'server-health')}">
        <li ng-class="{'active': (path == '/server-health/event-log')}">
          <a href="#/server-health/event-log" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Event log</a>
        </li>
        <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}">
          <a href="#/server-health/inventory-overview" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Hardware status</a>
        </li>
        <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
          <a href="#/server-health/sensors-overview" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">Sensors</a>
        </li>
        <li ng-class="{'active': (path == '/server-health/sys-log')}" ng-show="!dataService.configJson.redfishEventLogDisabled">
          <a href="#/server-health/sys-log" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-health') ? 0 : -1}}">System logs</a>
        </li>
      </ul>
    </li>
    <li>
      <button class="btn-control" ng-class="{opened: firstLevel == 'server-control'}" ng-click="change('server-control')">
        <icon class="nav-icon  nav-icon__control" file="icon-control.svg"></icon>
        Server control
      </button>
      <ul class="nav__second-level btn-control"
        ng-style="navStyle"
        ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
        <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
          <a href="#/server-control/power-operations" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Server power operations</a>
        </li>
        <li ng-class="{'active': (path == '/server-control/power-usage')}">
          <a href="#/server-control/power-usage" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Manage power usage</a>
        </li>
        <li ng-class="{'active': (path == '/server-control/server-led')}">
          <a href="#/server-control/server-led" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Server LED</a>
        </li>
        <li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
          <a href="#/server-control/bmc-reboot" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Reboot BMC</a>
        </li>
        <li ng-class="{'active': (path == '/server-control/remote-console')}">
          <a href="#/server-control/remote-console" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Serial over LAN console</a>
        </li>
        <li ng-class="{'active': (path == '/server-control/kvm')}">
          <a href="#/server-control/kvm" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">KVM</a>
        </li>
        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/virtual-media')}">
          <a href="#/configuration/virtual-media" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Virtual Media</a>
        </li>
      </ul>
    </li>
    <li>
      <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
        <icon class="nav-icon" file="icon-config.svg"></icon>
        Server configuration
      </button>
      <ul class="nav__second-level btn-firmware"
        ng-style="navStyle"
        ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
          <a href="#/configuration/network" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Network settings</a>
        </li>
        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/certificate')}">
          <a href="#/configuration/certificate" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Certificate management</a>
        </li>
        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
          <a href="#/configuration/snmp" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">SNMP settings</a>
        </li>
        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
          <a href="#/configuration/firmware" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Firmware</a>
        </li>
        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
          <a href="#/configuration/date-time" ng-click="closeSubnav()"
            tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Date and time settings</a>
        </li>
      </ul>
    </li>
    <li>
      <button class="btn-users" ng-class="{opened: firstLevel == 'users'}" ng-click="change('users')">
        <icon class="nav-icon" file="icon-user.svg"></icon>
        Users
      </button>
      <ul class="nav__second-level btn-users"
        ng-style="navStyle"
        ng-class="{opened: (showSubMenu && firstLevel == 'users')}">
        <li ng-class="{'active': (path == '/users' || path == '/users/manage-accounts')}">
          <a href="#/users/manage-accounts" ng-click="closeSubnav()"
            tabindex="{{ (showSubMenu && firstLevel == 'users') ? 0 : -1}}">Manage user account</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>