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/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>