1 files changed, 74 insertions, 22 deletions
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index e5a1eeeb..06e9efec 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,31 +1,83 @@
 <template>
-  <nav>
-    <ul>
-      <li><router-link to="/">Overview</router-link></li>
-      <li>
-        <router-link to="/access-control/local-user-management"
-          >Local User Management</router-link
+  <b-nav vertical>
+    <b-nav-item to="/"><Analytics16 /> Overview</b-nav-item>
+
+    <li class="nav-item">
+      <b-button v-b-toggle.health-menu variant="link">
+        <DataCheck16 /> Health
+      </b-button>
+
+      <b-collapse tag="ul" id="health-menu">
+        <b-nav-item href="javascript:void(0)">Event Log</b-nav-item>
+        <b-nav-item href="javascript:void(0)">Hardware Status</b-nav-item>
+        <b-nav-item href="javascript:void(0)">Sensors</b-nav-item>
+      </b-collapse>
+    </li>
+
+    <li class="nav-item">
+      <b-button v-b-toggle.control-menu variant="link">
+        <SettingsAdjust16 />
+        Control
+      </b-button>
+      <b-collapse tag="ul" id="control-menu">
+        <b-nav-item href="javascript:void(0)"
+          >Server power operations</b-nav-item
         >
-      </li>
-    </ul>
-  </nav>
+        <b-nav-item href="javascript:void(0)">Manage power usage</b-nav-item>
+        <b-nav-item href="javascript:void(0)">Server LED</b-nav-item>
+      </b-collapse>
+    </li>
+    <li class="nav-item">
+      <b-button v-b-toggle.configuration-menu variant="link">
+        <Settings16 />
+        Health
+      </b-button>
+      <b-collapse tag="ul" id="configuration-menu">
+        <b-nav-item href="javascript:void(0)">Network settings</b-nav-item>
+        <b-nav-item href="javascript:void(0)">SNMP settings</b-nav-item>
+        <b-nav-item href="javascript:void(0)">Firmware</b-nav-item>
+      </b-collapse>
+    </li>
+
+    <li class="nav-item">
+      <b-button v-b-toggle.access-control-menu variant="link">
+        <Password16 />
+        Access Control
+      </b-button>
+      <b-collapse tag="ul" id="access-control-menu">
+        <b-nav-item href="javascript:void(0)">LDAP</b-nav-item>
+        <b-nav-item to="/access-control/local-user-management"
+          >Local user management</b-nav-item
+        >
+        <b-nav-item href="javascript:void(0)">SSL Certificates</b-nav-item>
+      </b-collapse>
+    </li>
+  </b-nav>
 </template>
 
 <script>
-// import Analytics16 from "@carbon/icons-vue/es/analytics/16";
-// import DataCheck16 from "@carbon/icons-vue/es/data--check/16";
-// import SettingsAdjust16 from "@carbon/icons-vue/es/settings--adjust/16";
-// import Settings16 from "@carbon/icons-vue/es/settings/16";
-// import Password16 from "@carbon/icons-vue/es/password/16";
+import Analytics16 from "@carbon/icons-vue/es/analytics/16";
+import DataCheck16 from "@carbon/icons-vue/es/data--check/16";
+import SettingsAdjust16 from "@carbon/icons-vue/es/settings--adjust/16";
+import Settings16 from "@carbon/icons-vue/es/settings/16";
+import Password16 from "@carbon/icons-vue/es/password/16";
 
 export default {
-  name: "AppNavigation"
-  // components: {
-  //   Analytics16,
-  //   DataCheck16,
-  //   SettingsAdjust16,
-  //   Settings16,
-  //   Password16
-  // }
+  name: "AppNavigation",
+  components: {
+    Analytics16,
+    DataCheck16,
+    SettingsAdjust16,
+    Settings16,
+    Password16
+  }
 };
 </script>
+
+<style scoped>
+ul li ul {
+  list-style: none;
+  padding-left: 0;
+  margin-left: 1rem;
+}
+</style>