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>