diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-01-18 01:10:34 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-01-21 21:32:49 +0300 |
commit | 42c1989301a81ebaa4733f403fcdc6c0a5368f11 (patch) | |
tree | 96800ea324ecfba8187c1ef6ce310329d95e12f4 | |
parent | 35080acbbf29de7cfd21d19f3c3637d7231f2a7e (diff) | |
download | webui-vue-42c1989301a81ebaa4733f403fcdc6c0a5368f11.tar.xz |
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>
-rw-r--r-- | src/App.vue | 25 | ||||
-rw-r--r-- | src/components/AppNavigation/AppNavigation.vue | 96 | ||||
-rw-r--r-- | src/main.js | 14 |
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; |