Update navigation to accordian-style menu

- New navigation provides intuitive structure for showing relationship
between sections and pages
- Menu keeps an open state, which allows easy clicking to sibling pages
- Ability to preview all page sections w/o hover over blocking page content
- Allows user to see where they are within navigation at all times

Tested: Opened each page and confirmed new navigation worked, clicked through
to all pages successfully.

Change-Id: Ie10dc95d8e15ee9bf89a3bec9ff231c0a7065ed9
Signed-off-by: Kathy Pine <kathryn.elainex.pine@intel.com>

10 files changed, 227 insertions, 223 deletions

diff --git a/app/assets/icons/icon-config.svg b/app/assets/icons/icon-config.svg
index b649651..223ed7a 100644
--- a/app/assets/icons/icon-config.svg
+++ b/app/assets/icons/icon-config.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27 16.76V16v-.77l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1 2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1 2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1 2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51zM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4 2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4 3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20z"/><path d="M16 22a6 6 0 1 1 6-6 5.94 5.94 0 0 1-6 6zm0-10a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M27 16.76V16v-.77l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1 2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1 2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1 2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51zM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4 2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4 3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20z"/><path fill="#ffffff" d="M16 22a6 6 0 1 1 6-6 5.94 5.94 0 0 1-6 6zm0-10a3.91 3.91 0 0 0-4 4 3.91 3.91 0 0 0 4 4 3.91 3.91 0 0 0 4-4 3.91 3.91 0 0 0-4-4z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-control.svg b/app/assets/icons/icon-control.svg
index 5c18df3..4ac4693 100644
--- a/app/assets/icons/icon-control.svg
+++ b/app/assets/icons/icon-control.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 23"><path id="a" d="M11.11,2.83A3.73,3.73,0,0,0,7.47,0,3.81,3.81,0,0,0,3.83,2.83H0V4.72H3.83A3.73,3.73,0,0,0,7.47,7.55a3.81,3.81,0,0,0,3.64-2.83H28V2.83ZM7.47,4.72a.89.89,0,0,1-.93-.94.89.89,0,0,1,.93-.94.89.89,0,0,1,.93.94A.89.89,0,0,1,7.47,4.72ZM20.53,7.55a3.81,3.81,0,0,1,3.64,2.83H28v1.89H24.17a3.81,3.81,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V10.38H16.89a3.81,3.81,0,0,1,3.64-2.83Zm0,4.72a.89.89,0,0,0,.93-.94.93.93,0,1,0-1.87,0A.89.89,0,0,0,20.53,12.27ZM7.47,15.1a3.82,3.82,0,0,1,3.64,2.83H28v1.89H11.11a3.82,3.82,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V17.93H3.83A3.81,3.81,0,0,1,7.47,15.1Zm0,4.72a.94.94,0,0,0,0-1.89.94.94,0,0,0,0,1.89Z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 23"><path fill="#ffffff" id="a" d="M11.11,2.83A3.73,3.73,0,0,0,7.47,0,3.81,3.81,0,0,0,3.83,2.83H0V4.72H3.83A3.73,3.73,0,0,0,7.47,7.55a3.81,3.81,0,0,0,3.64-2.83H28V2.83ZM7.47,4.72a.89.89,0,0,1-.93-.94.89.89,0,0,1,.93-.94.89.89,0,0,1,.93.94A.89.89,0,0,1,7.47,4.72ZM20.53,7.55a3.81,3.81,0,0,1,3.64,2.83H28v1.89H24.17a3.81,3.81,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V10.38H16.89a3.81,3.81,0,0,1,3.64-2.83Zm0,4.72a.89.89,0,0,0,.93-.94.93.93,0,1,0-1.87,0A.89.89,0,0,0,20.53,12.27ZM7.47,15.1a3.82,3.82,0,0,1,3.64,2.83H28v1.89H11.11a3.82,3.82,0,0,1-3.64,2.83,3.73,3.73,0,0,1-3.64-2.83H0V17.93H3.83A3.81,3.81,0,0,1,7.47,15.1Zm0,4.72a.94.94,0,0,0,0-1.89.94.94,0,0,0,0,1.89Z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-health.svg b/app/assets/icons/icon-health.svg
index f01af2c..d6236a6 100644
--- a/app/assets/icons/icon-health.svg
+++ b/app/assets/icons/icon-health.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"/><circle cx="11" cy="8" r="1"/><circle cx="11" cy="16" r="1"/><circle cx="11" cy="24" r="1"/><path d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff"  d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"/><circle cx="11" cy="8" r="1"/><circle fill="#ffffff" cx="11" cy="16" r="1"/><circle fill="#ffffff" cx="11" cy="24" r="1"/><path fill="#ffffff" d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-overview.svg b/app/assets/icons/icon-overview.svg
index 748fa81..0b42642 100644
--- a/app/assets/icons/icon-overview.svg
+++ b/app/assets/icons/icon-overview.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"/><path d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"/><path fill="#ffffff" d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-user.svg b/app/assets/icons/icon-user.svg
index 0d4610d..8e5466c 100644
--- a/app/assets/icons/icon-user.svg
+++ b/app/assets/icons/icon-user.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 4a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7zM26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#ffffff" d="M16 4a5 5 0 1 1-5 5 5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7 7 7 0 0 0-7-7zM26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/openBMC.png b/app/assets/images/openBMC.png
deleted file mode 100644
index e350113..0000000
--- a/app/assets/images/openBMC.png
+++ /dev/null
diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 435980a..41441e2 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -1,97 +1,119 @@
 <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')">
+      <button ng-click="change('overview')">
         <icon class="nav-icon" file="icon-overview.svg" aria-hidden="true"></icon>
-        Server overview
-      </a>
+        <span class="nav-link">Overview</span>
+      </button>
     </li>
-    <li>
-      <button class="btn-health" ng-class="{opened: firstLevel == 'server-health'}" ng-click="change('server-health')">
+    <li ng-class="{opened: showHealthMenu}">
+      <button class="btn-health" ng-click="change('server-health')">
         <icon class="nav-icon" file="icon-health.svg" aria-hidden="true"></icon>
-        Server health
+        <span class="nav-link">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>
+      <ul class="nav__second-level btn-health" ng-style="navStyle" ng-class="{opened: (showHealthMenu)}">
+        <li ng-class="{'active': (path == '/server-health/sys-log')}">
+          <a href="#/server-health/sys-log" tabindex="{{(showHealthMenu) ? 0 : -1}}">
+            <span>Event log</span>
+          </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>
+          <a href="#/server-health/inventory-overview" tabindex="{{(showHealthMenu) ? 0 : -1}}">
+            <span>Hardware status</span>
+          </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>
+          <a href="#/server-health/sensors-overview" tabindex="{{(showHealthMenu) ? 0 : -1}}">
+            <span>Sensors</span>
+          </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" aria-hidden="true"></icon>
-        Server control
+    <li ng-class="{opened: showControlMenu}">
+      <button ng-click="change('server-control')">
+        <icon class="nav-icon" file="icon-control.svg" aria-hidden="true"></icon>
+        <span class="nav-link">Control</span>
       </button>
-      <ul class="nav__second-level btn-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'server-control')}">
+      <ul class="nav__second-level btn-control" ng-class="{opened: (showControlMenu)}">
         <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>
+          <a href="#/server-control/power-operations" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>Server power operations</span>
+          </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>
+          <a href="#/server-control/power-usage" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>Manage power usage</span>
+          </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>
+          <a href="#/server-control/server-led" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>Server LED</span>
+          </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>
+          <a href="#/server-control/bmc-reboot" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>Reboot BMC</span>
+          </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>
+          <a href="#/server-control/remote-console" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>Serial over LAN console</span>
+          </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>
+          <a href="#/server-control/kvm" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>KVM</span>
+          </a>
         </li>
-        <li ng-class="{'active': (path == '/server-control/virtual-media')}">
-          <a href="#/server-control/virtual-media" ng-click="closeSubnav()"
-            tabindex="{{(showSubMenu && firstLevel == 'server-control') ? 0 : -1}}">Virtual Media</a>
+        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/virtual-media')}">
+          <a href="#/server-control/virtual-media" tabindex="{{(showControlMenu) ? 0 : -1}}">
+            <span>Virtual Media</span>
+          </a>
         </li>
       </ul>
     </li>
-    <li>
-      <button class="btn-config" ng-class="{opened: firstLevel == 'configuration'}" ng-click="change('configuration')">
+    <li ng-class="{opened: showConfigMenu}">
+      <button ng-click="change('configuration')">
         <icon class="nav-icon" file="icon-config.svg" aria-hidden="true"></icon>
-        Server configuration
+        <span class="nav-link">Configuration</span>
       </button>
-      <ul class="nav__second-level btn-firmware" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'configuration')}">
+      <ul class="nav__second-level btn-firmware" ng-class="{opened: (showConfigMenu)}">
         <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>
+          <a href="#/configuration/network" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Network
+              settings</span></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>
+          <a href="#/configuration/snmp" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>SNMP
+              settings</span></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>
+          <a href="#/configuration/firmware" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Firmware</span></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>
+          <a href="#/configuration/date-time" tabindex="{{(showConfigMenu) ? 0 : -1}}"><span>Date and
+              time
+              settings</span></a>
         </li>
       </ul>
     </li>
-    <li>
-      <button class="btn-access-control" ng-class="{opened: firstLevel == 'access-control'}" ng-click="change('access-control')">
-          <icon class="nav-icon nav-icon__key" file="icon-key.svg" aria-hidden="true"></icon>
-          Access control
+    <li ng-class="{opened: showAccessMenu}">
+      <button ng-click="change('access-control')">
+        <icon class="nav-icon" file="icon-user.svg" aria-hidden="true"></icon>
+        <span class="nav-link">Access</span>
       </button>
-      <ul class="nav__second-level btn-access-control" ng-style="navStyle" ng-class="{opened: (showSubMenu && firstLevel == 'access-control')}">
+      <ul class="nav__second-level btn-users" ng-style="navStyle" ng-class="{opened: (showAccessMenu)}">
         <li ng-class="{'active': (path == '/access-control' || path == '/access-control/ldap')}">
-          <a href="#/access-control/ldap" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">LDAP</a>
+          <a href="#/access-control/ldap" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>LDAP</span></a>
         </li>
         <li ng-class="{'active': (path == '/access-control' || path == '/access-control/local-users')}">
-          <a href="#/access-control/local-users" ng-click="closeSubnav()" tabindex="{{ (showSubMenu && firstLevel == 'access-control') ? 0 : -1}}">Local users</a>
+          <a href="#/access-control/local-users" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>Local
+              users</span></a>
         </li>
         <li ng-class="{'active': (path == '/access-control' || path == '/access-control/ssl-certificates')}">
-          <a href="#/access-control/ssl-certificates" ng-click="closeSubnav()" tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">SSL certificates</a>
+          <a href="#/access-control/ssl-certificates" tabindex="{{ (showAccessMenu) ? 0 : -1}}"><span>SSL
+              certificates</span></a>
         </li>
       </ul>
     </li>
   </ul>
-</nav>
+</nav>
\ No newline at end of file
diff --git a/app/common/directives/app-navigation.js b/app/common/directives/app-navigation.js
index baa8c8b..a2ced03 100644
--- a/app/common/directives/app-navigation.js
+++ b/app/common/directives/app-navigation.js
@@ -10,18 +10,30 @@ window.angular && (function(angular) {
           'controller': [
             '$scope', '$location', 'dataService',
             function($scope, $location, dataService) {
+              $scope.showHealthMenu = false;
+              $scope.showControlMenu = false;
+              $scope.showConfigMenu = false;
+              $scope.showAccessMenu = false;
               $scope.dataService = dataService;
-              $scope.showSubMenu = false;
+
               $scope.change = function(firstLevel) {
-                if (firstLevel != $scope.firstLevel) {
-                  $scope.firstLevel = firstLevel;
-                  $scope.showSubMenu = true;
-                } else {
-                  $scope.showSubMenu = !$scope.showSubMenu;
-                }
-              };
-              $scope.closeSubnav = function() {
-                $scope.showSubMenu = false;
+                switch (firstLevel) {
+                  case 'server-health':
+                    $scope.showHealthMenu = !$scope.showHealthMenu;
+                    break;
+                  case 'server-control':
+                    $scope.showControlMenu = !$scope.showControlMenu;
+                    break;
+                  case 'configuration':
+                    $scope.showConfigMenu = !$scope.showConfigMenu;
+                    break;
+                  case 'access-control':
+                    $scope.showAccessMenu = !$scope.showAccessMenu;
+                    break;
+                  case 'overview':
+                    $location.url('/overview/server');
+                    break;
+                };
               };
               $scope.$watch('path', function() {
                 var urlRoot = $location.path().split('/')[1];
@@ -30,22 +42,15 @@ window.angular && (function(angular) {
                 } else {
                   $scope.firstLevel = 'overview';
                 }
-                $scope.showSubMenu = false;
+                $scope.showSubMenu = true;
               });
               $scope.$watch('showNavigation', function() {
-                var paddingTop = 0;
                 var urlRoot = $location.path().split('/')[1];
                 if (urlRoot != '') {
                   $scope.firstLevel = urlRoot;
                 } else {
                   $scope.firstLevel = 'overview';
                 }
-
-                if ($scope.showNavigation) {
-                  paddingTop = document.getElementById('header').offsetHeight;
-                }
-                dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
-                $scope.navStyle = {'top': paddingTop + 'px'};
               });
             }
           ],
@@ -56,11 +61,11 @@ window.angular && (function(angular) {
 
               if (scope.showSubMenu) {
                 scope.$apply(function() {
-                  scope.showSubMenu = false;
+                  scope.showSubMenu = true;
                 });
               }
             });
           }
         };
       });
-})(window.angular);
+})(window.angular);
\ No newline at end of file
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index f8f5a6f..519c3ee 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,34 +1,14 @@
-$nav__toplvlWidth: 125px;
-$nav__seclvlWidth: 240px;
-$nav__top-level-color: $base-01--01;
-$nav__second-level-color: $base-02--06;
-$nav__second-level-text-color: $base-02--01;
+$nav__toplvlWidth: 240px;
+$nav__top-level-color: $color--blue-100;
+$nav__top-level-text-secondary: $color--grey-20;
+$nav__second-level-text-primary: $color--teal-50;
+$nav__second-level-text-secondary: $primary-light;
+$nav__hover-over-outline: $color--grey-40;
 
 //Navigation icons
-@mixin navIcons {
-  color: $primary-light;
-  fill: $primary-light;
-  max-height: 40px;
-  stroke-width: .5;
-  display: block;
-  margin: .5em auto;
-  .st0 {
-    fill: none;
-    stroke: $primary-light;
-    stroke-width: 2;
-    stroke-miterlimit: 10;
-  }
-  .st1 {
-    fill: none;
-    stroke: $primary-light;
-    stroke-width: 4;
-    stroke-miterlimit: 10;
-  }
-}
-
 .nav__wrapper {
   height: 100%;
-  position: fixed;
+  position: absolute;
   top: 0;
   z-index: 100;
 }
@@ -36,158 +16,156 @@ $nav__second-level-text-color: $base-02--01;
 // Top level navigation
 #nav__top-level {
   background: $nav__top-level-color;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   list-style-type: none;
-  margin: 0;
-  padding: 0;
+  padding: 22px 0 0 0;
+  margin: 130px 0 0 0;
   width: $nav__toplvlWidth;
   overflow-y: auto;
-  li {
+  >li {
     margin: 0;
+    height: 3em;
+    &.opened{
+      height: inherit;
+      .nav-link{
+        color: $primary-light;
+      }
+    }
   }
   > li > a,
   > li > button {
-    height: 120px;
+    height: 3.3em;
   }
-  //svg icons
-  .nav-icon {
-    @include navIcons;
-    width: 100%;
-    height: 100%;
-    svg {
-      width: 36px;
-      height: auto;
+  button,
+  a,
+  span {
+    &:hover {
+      &.opened{
+        color: $primary-light;
+      }
     }
   }
-  .nav-icon__control,
-  .nav-icon__key {
-    svg {
-      width: 30px;
+  .nav-icon {
+      height: 26px;
+      float: left;
+      margin: 2px 0 0 1px;
+      width: 26px;
+      fill: $primary-light;
+      svg {
+        height: inherit;
+        width:  26px;
+        max-width: inherit;
+        fill: $primary-light;
+      }
+  }
+  .nav-link {
+      float: left;
+      font-size: 15px;
+      padding: 9px 0 0 7px;
+      margin-left: 5px;
+      &:focus{
+        outline: 0;
+      }
     }
+}
+
+.nav__wrapper button {
+  background: transparent;
+  border: 0;
+  color: $primary-light;
+  width: 95%;
+  padding: 5px 5px 9px 10px;
+  margin: 0 0 0 6px;
+  display: block;
+  text-align: center;
+  white-space: normal;
+  border-radius: 0;
+  text-decoration: none;
+  border: 1px solid transparent;
+  font-weight: normal;
+  font-size: 13px;
+  &:hover,
+  &:focus {
+    background: fade-out(#ffffff, 0.9);
+    color: $nav__top-level-text-secondary;
+    border-radius: 0;
+    border: 1px solid $nav__hover-over-outline;
+    outline: 0;
+  }
+  .icon {
+    margin-left: .3em;
+    margin-top: .6em;
+  }
+  img {
+    width: 2em;
+    height: 2em;
   }
-  .button, button, a {
-    background: transparent;
-    border: 0;
+}
+
+.nav__second-level  {
+  list-style-type: none;
+  opacity: 0;
+  left: $nav__toplvlWidth;
+  padding: 0;
+  margin: 0;
+  transform: scaleY(0);
+  transform-origin: 0 0;
+  transition: all $duration--moderate-01 $standard-easing--expressive;
+  overflow: hidden;
+  line-height: 0;
+  a {
     color: $primary-light;
-    fill: $primary-light;
-    width: 100%;
-    padding: 1em;
-    display: block;
-    text-align: center;
-    margin-bottom: 0;
+    width: 95%;
+    padding: 6px 5px 8px 50px;
+    margin: 0 0 0 6px;
     white-space: normal;
-    border-radius: 0;
     text-decoration: none;
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid $border-color-02;
+    border: 1px solid transparent;
     font-weight: normal;
-    font-size: .9em;
-    line-height: 1.2;
-    &:hover {
-      background: $primary-light;
-      fill: $primary-dark;
-      color: $primary-action;
-      padding: 1em;
+    font-size: .8rem;
+    &:hover,
+    &:focus {
+      background: fade-out(#ffffff, 0.9);
+      color: $nav__second-level-text-secondary;
       border-radius: 0;
-      border-bottom: 1px solid $border-color-01;
-      .nav__icon-help__outer {
-        stroke: $primary-dark;
-      }
-      .nav__icon-help__inner {
-        fill: $primary-action;
-      }
-      .nav-icon {
-        fill: $primary-action;
-        color: $primary-action;
-        .st0 {
-          stroke: $primary-action;
-        }
-        .st1 {
-          fill: $primary-action;
-          color: $primary-action;
-          stroke: $primary-action;
-        }
-      }
+      border-color: $nav__hover-over-outline;
+      outline: 0;
     }
   }
-  .opened {
-    background: $nav__second-level-color;
-    fill: $primary-dark;
-    color: darken($primary-action, 10%);
-    border-bottom: 1px solid $border-color-01;
-    .nav-icon {
-      fill: $primary-action;
-      color: $primary-action;
-      .st0 {
-        stroke: $primary-action;
-      }
-      .st1 {
-        fill: $primary-action;
-        color: $primary-action;
-        stroke: $primary-action;
-      }
+  &.opened {
+    line-height: 1.1;
+    overflow: visible;
+    opacity: 1;
+    transform: scaleY(1);
+    transition: all $duration--moderate-01 $standard-easing--expressive;
+    li a{
+      display:block;
     }
   }
 
-  // Second Level Navigation
-  .nav__second-level {
-    position: fixed;
-    background: $nav__second-level-color;
-    top: 0;
-    bottom: 0;
-    left: -245px;
-    width: $nav__seclvlWidth;
-    z-index: -1;
-    padding: 0;
+  li:hover
+  {
+    margin-left: 17px;
     margin: 0;
-    list-style-type: none;
-    display: block;
-    transition: left $duration--slow-01 $standard-easing--productive;
-    &.opened {
-      left: $nav__toplvlWidth;
-      box-shadow: 7px 0 28px -10px $base-02--02;
-    }
-    a {
-      padding: 1.2em 1em 1.2em 1em;
-      display: block;
-      color: $primary-dark;
-      text-decoration: none;
-      position: relative;
-      font-weight: 400;
-      text-align: left;
-      border-bottom: 1px solid transparent;
-      &:hover {
-        background: $primary-light;
-      }
+    padding: 0;
+    a{
+      padding-left: 50px;
     }
+  }
 
-    li {
-      a:after{
-        content: '\203A';
-        position: absolute;
-        font-size: 2em;
-        font-weight: 700;
-        top: 50%;
-        right: .6em;
-        transform: translateY(-59%);
-        color: $nav__second-level-text-color;
-        opacity: 0;
-      }
-      &.active {
-        a {font-weight: 700;}
+  li {
+    &:focus,
+    &:hover {
+      a {
+        color: $nav__second-level-text-secondary;
       }
-      &.active,
-      &:focus,
-      &:hover {
-        a {color: $nav__second-level-text-color;}
-        a:after {
-          opacity: 1;
-          right: .3em;
-          @include fastTransition-all;
-        }
+    }
+    &.active {
+      a span {
+        color: $nav__second-level-text-primary;
       }
     }
   }
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index f5d2757..143c52a 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -1,12 +1,11 @@
 // Content layout styles
-$nav__toplvlWidth: 120px;
-$nav__seclvlWidth: 240px;
+$nav__toplvlWidth: 240px;
 
 // Main element class
 .content__container {
   margin-left: $nav__toplvlWidth;
   padding: 1em 0.1em;
-
+  margin-top: 130px;
   @include mediaQuery(x-small) {
     padding: 1rem 2rem;
   }