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>
diff --git a/src/App.vue b/src/App.vue
index d21ef4f..504b8c9 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 @@
}
};
</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 e5a1eee..06e9efe 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 742b991..4db1b2b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,23 +5,23 @@
import Axios from "axios";
import {
ButtonPlugin,
- NavPlugin,
CollapsePlugin,
- LinkPlugin,
- NavbarPlugin,
- TablePlugin,
LayoutPlugin,
- ModalPlugin
+ LinkPlugin,
+ ModalPlugin,
+ NavbarPlugin,
+ NavPlugin,
+ TablePlugin
} from "bootstrap-vue";
+Vue.use(LayoutPlugin);
Vue.use(ButtonPlugin);
-Vue.use(NavPlugin);
Vue.use(CollapsePlugin);
Vue.use(LinkPlugin);
-Vue.use(NavbarPlugin);
-Vue.use(TablePlugin);
-Vue.use(LayoutPlugin);
Vue.use(ModalPlugin);
+Vue.use(NavbarPlugin);
+Vue.use(NavPlugin);
+Vue.use(TablePlugin);
Vue.prototype.$http = Axios;