app/common/directives/app-navigation.html

<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')">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M23.9 18.2l3.3 3.3 1.1-1.1-4.4-4.4-7.8 7.8-3.3-3.3-1.1 1.1 4.4 4.4 7.8-7.8z"/><path d="M5 8v24h30V8H5zm28 22H7V12h26v18z"/></svg>
          Server overview
        </span>
      </a>
    </li>
    <li>
      <button class="btn-health"
        ng-class="{opened: firstLevel == 'server-health'}"
        ng-click="change('server-health')">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M32 12.9V16H8V8h19M8 16h24v8H8zM8 24h24v8H8zM19 12h8M11 12h2M19 20h8M11 20h2M19 28h8M11 28h2"/><path d="M36.4 4l1.1 1.1-5.1 5.1-2.9-2.8 1.2-1.2L32.4 8z"/></svg>
          Server health
        </span>
      </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.redfishSupportEnabled">
          <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')">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path class="st0" d="M8 12h24M8 20h24M8 28h24"/><path class="st1" d="M24 28h4M18 20h4M12 12h4"/></svg>
          Server control
        </span>
      </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')">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" class="nav-icon"><path d="M31.5 20c0-.6-.1-1.2-.2-1.8L35 15l-3.1-5.1-4.4 1.4c-1.1-.9-2.3-1.6-3.6-2.1L23 5h-6l-1 4.2c-1.3.5-2.5 1.2-3.6 2.1L8.1 9.9 5 15l3.7 3.2c-.1.6-.2 1.2-.2 1.8 0 .6.1 1.2.2 1.8L5 25l3.1 5.1 4.4-1.4c1.1.9 2.3 1.6 3.6 2.1l1 4.2h6l1-4.2c1.3-.5 2.5-1.2 3.6-2.1l4.4 1.4L35 25l-3.7-3.2c.1-.6.2-1.2.2-1.8zm.9 5.4L31 27.7l-2.9-.9-1.1-.4-.9.7c-.9.8-1.9 1.3-2.9 1.7l-1 .4-.2 1.1-.6 2.7h-2.8l-.6-2.7-.2-1.1-1-.4c-1.1-.4-2.1-1-2.9-1.7l-.9-.7-1.1.4-2.9.9-1.4-2.3 2.4-2.1.8-.7-.2-1.1c-.1-.5-.1-1-.1-1.5 0-.4 0-.9.1-1.5l.2-1.1-.8-.7-2.4-2.1L9 12.3l2.9.9 1.1.4.9-.7c.9-.8 1.9-1.3 2.9-1.7l1-.4.2-1.1.6-2.7h2.8l.6 2.7.2 1.1 1 .4c1.1.4 2.1 1 2.9 1.7l.9.7 1.1-.4 2.9-.9 1.4 2.3-2.4 2.1-.8.7.2 1.1c.1.6.1 1 .1 1.5s0 .9-.1 1.5l-.2 1.1.8.7 2.4 2.1z"/><path d="M20 15c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"/></svg>
          Server configuration
        </span>
      </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/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')">
        <span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="nav-icon"><path d="M16 21c5.523 0 10-4.477 10-10S21.523 1 16 1 6 5.477 6 11s4.477 10 10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm8 20H8a4 4 0 0 0-4 4v4h24v-4a4 4 0 0 0-4-4z"/></svg>
          Users
        </span>
      </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>