Create basic application using vue
- Create vue app
- Add AppHeader and AppNavigation
- Set up routes for server overview and local user management
- Add themes and set to gray-10 theme
- Add active class for current navigation
- Add a prototype method named $http to vue prototype
- The UI uses console logs in production to communicate to users
- Add boostrap vue component library
Change-Id: Ib6618e6357ca01bdac6de4ed031a15c8552226f3
Signed-off-by: Derick Montague <derick.montague@ibm.com>
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
new file mode 100644
index 0000000..b28927e
--- /dev/null
+++ b/src/components/AppHeader/AppHeader.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <a href="#main-content">Skip to main content</a>
+ <header>
+ <b-navbar toggleable="lg" type="dark" variant="primary">
+ <div>
+ <router-link to="/">{{ orgName }} System Management</router-link>
+ </div>
+ <div>
+ <span>{{ serverName }}</span>
+ <span>{{ ipAddress }}</span>
+ </div>
+ <div>
+ <b-button variant="link">
+ <Renew20 />
+ Refresh Data
+ </b-button>
+ <b-button variant="link">
+ <user-avatar-20 />
+ User Avatar
+ </b-button>
+ </div>
+ </b-navbar>
+ </header>
+ </div>
+</template>
+
+<script>
+import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
+import Renew20 from "@carbon/icons-vue/es/renew/20";
+export default {
+ name: "AppHeader",
+ components: { Renew20, UserAvatar20 },
+ data() {
+ return {
+ orgName: "OpenBMC",
+ serverName: "Server Name",
+ ipAddress: "127.0.0.0"
+ };
+ }
+};
+</script>
+
+<style lang="scss" scoped></style>