1<nav class="nav__wrapper">
2  <ul id="nav__top-level" ng-style="navStyle">
3    <li>
4      <button ng-click="change('overview')">
5        <icon class="nav-icon" file="icon-overview.svg" aria-hidden="true"></icon>
6        <span class="nav-link">Overview</span>
7      </button>
8    </li>
9    <li ng-class="{opened: showHealthMenu}">
10      <button class="btn-health" ng-click="change('server-health')">
11        <icon class="nav-icon" file="icon-health.svg" aria-hidden="true"></icon>
12        <span class="nav-link">Health</span>
13      </button>
14      <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showHealthMenu)}">
15        <li ng-class="{'active': (path == '/server-health/sys-log')}">
16          <a href="#/server-health/sys-log" tabindex="{{(showHealthMenu) ? 0 : -1}}">
17            <span>Event log</span>
18          </a>
19        </li>
20        <li ng-class="{'active': (path == '/server-health/inventory-overview' || path == '/server-health/inventory')}">
21          <a href="#/server-health/inventory-overview" tabindex="{{(showHealthMenu) ? 0 : -1}}">
22            <span>Hardware status</span>
23          </a>
24        </li>
25        <li ng-class="{'active': (path == '/server-health/sensors-overview' || path == '/server-health/sensors')}">
26          <a href="#/server-health/sensors-overview" tabindex="{{(showHealthMenu) ? 0 : -1}}">
27            <span>Sensors</span>
28          </a>
29        </li>
30      </ul>
31    </li>
32    <li ng-class="{opened: showControlMenu}">
33      <button ng-click="change('server-control')">
34        <icon class="nav-icon" file="icon-control.svg" aria-hidden="true"></icon>
35        <span class="nav-link">Control</span>
36      </button>
37      <ul class="nav__second-level btn-control" ng-class="{opened: (showControlMenu)}">
38        <li ng-class="{'active': (path == '/server-control' || path == '/server-control/power-operations')}">
39          <a href="#/server-control/power-operations" tabindex="{{(showControlMenu) ? 0 : -1}}">
40            <span>Server power operations</span>
41          </a>
42        </li>
43        <li ng-class="{'active': (path == '/server-control/power-usage')}">
44          <a href="#/server-control/power-usage" tabindex="{{(showControlMenu) ? 0 : -1}}">
45            <span>Manage power usage</span>
46          </a>
47        </li>
48        <li ng-class="{'active': (path == '/server-control/server-led')}">
49          <a href="#/server-control/server-led" tabindex="{{(showControlMenu) ? 0 : -1}}">
50            <span>Server LED</span>
51          </a>
52        </li>
53        <li ng-class="{'active': (path == '/server-control/bmc-reboot')}">
54          <a href="#/server-control/bmc-reboot" tabindex="{{(showControlMenu) ? 0 : -1}}">
55            <span>Reboot BMC</span>
56          </a>
57        </li>
58        <li ng-class="{'active': (path == '/server-control/remote-console')}">
59          <a href="#/server-control/remote-console" tabindex="{{(showControlMenu) ? 0 : -1}}">
60            <span>Serial over LAN console</span>
61          </a>
62        </li>
63        <li ng-class="{'active': (path == '/server-control/kvm')}">
64          <a href="#/server-control/kvm" tabindex="{{(showControlMenu) ? 0 : -1}}">
65            <span>KVM</span>
66          </a>
67        </li>
68        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/virtual-media')}">
69          <a href="#/server-control/virtual-media" tabindex="{{(showControlMenu) ? 0 : -1}}">
70            <span>Virtual Media</span>
71          </a>
72        </li>
73      </ul>
74    </li>
75    <li ng-class="{opened: showConfigMenu}">
76      <button ng-click="change('configuration')">
77        <icon class="nav-icon" file="icon-config.svg" aria-hidden="true"></icon>
78        <span class="nav-link">Configuration</span>
79      </button>
80      <ul class="nav__second-level btn-firmware" ng-class="{opened: (showConfigMenu)}">
81        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/network')}">
82          <a href="#/configuration/network" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Network
83              settings</span></a>
84        </li>
85        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
86          <a href="#/configuration/snmp" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>SNMP
87              settings</span></a>
88        </li>
89        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/firmware')}">
90          <a href="#/configuration/firmware" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Firmware</span></a>
91        </li>
92        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/date-time')}">
93          <a href="#/configuration/date-time" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Date and
94              time
95              settings</span></a>
96        </li>
97      </ul>
98    </li>
99    <li ng-class="{opened: showAccessMenu}">
100      <button ng-click="change('access-control')">
101        <icon class="nav-icon" file="icon-user.svg" aria-hidden="true"></icon>
102        <span class="nav-link">Access</span>
103      </button>
104      <ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showAccessMenu)}">
105        <li ng-class="{'active': (path == '/access-control' || path == '/access-control/ldap')}">
106          <a href="#/access-control/ldap" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>LDAP</span></a>
107        </li>
108        <li ng-class="{'active': (path == '/access-control' || path == '/access-control/local-users')}">
109          <a href="#/access-control/local-users" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>Local
110              users</span></a>
111        </li>
112        <li ng-class="{'active': (path == '/access-control' || path == '/access-control/ssl-certificates')}">
113          <a href="#/access-control/ssl-certificates" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>SSL
114              certificates</span></a>
115        </li>
116      </ul>
117    </li>
118  </ul>
119</nav>