Add primary navigation with default styles

- Import and use Bootstrap Vue components for the navigation structure
- Import  and add icons to the navigation sections
- Add minor style overrides

Change-Id: I4c1903390d75aff086c912a710f4c04d38d28a28
Signed-off-by: Derick Montague <derick.montague@ibm.com>

3 files changed, 102 insertions, 33 deletions

diff --git a/src/App.vue b/src/App.vue
index d21ef4f6..504b8c93 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,18 @@
 <template>
   <div id="app">
     <AppHeader />
-    <AppNavigation />
-    <main id="#main-content">
-      <router-view />
-    </main>
+    <b-container fluid class="page-container">
+      <b-row no-gutters>
+        <b-col tag="nav" cols="12" md="3">
+          <AppNavigation />
+        </b-col>
+        <b-col cols="12" offset-md="1" md="7">
+          <main id="#main-content">
+            <router-view />
+          </main>
+        </b-col>
+      </b-row>
+    </b-container>
   </div>
 </template>
 
@@ -23,3 +31,12 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.page-container {
+  margin-right: 0;
+  margin-left: 0;
+  padding-right: 0;
+  padding-left: 0;
+}
+</style>
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>
diff --git a/src/main.js b/src/main.js
index 742b991e..4db1b2bf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,23 +5,23 @@ import store from "./store";
 import Axios from "axios";
 import {
   ButtonPlugin,
-  NavPlugin,
   CollapsePlugin,
+  LayoutPlugin,
   LinkPlugin,
+  ModalPlugin,
   NavbarPlugin,
-  TablePlugin,
-  LayoutPlugin,
-  ModalPlugin
+  NavPlugin,
+  TablePlugin
 } from "bootstrap-vue";
 
+Vue.use(LayoutPlugin);
 Vue.use(ButtonPlugin);
-Vue.use(NavPlugin);
 Vue.use(CollapsePlugin);
 Vue.use(LinkPlugin);
+Vue.use(ModalPlugin);
 Vue.use(NavbarPlugin);
+Vue.use(NavPlugin);
 Vue.use(TablePlugin);
-Vue.use(LayoutPlugin);
-Vue.use(ModalPlugin);
 
 Vue.prototype.$http = Axios;