Add primeflex css, header & NewSmile view

2 files changed, 38 insertions, 58 deletions

diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue
new file mode 100644
index 0000000..8ab29b2
--- /dev/null
+++ b/client/src/components/Header.vue
@@ -0,0 +1,38 @@
+<template>
+<div>
+  <Menubar :model="items">
+    <template #start>
+      <p id="header-title">Vela</p>
+    </template>
+  </Menubar>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label:'Home',
+                    icon:'pi pi-fw pi-home',
+                    to:'/'
+                },
+                {
+                    label:'New Smile',
+                    icon:'pi pi-fw pi-user-plus',
+                    to:'/new'
+                },
+            ]
+        }
+    }
+}
+</script>
+
+<style scoped>
+#header-title {
+    margin: 0 1ch 0 0;
+    font-size: 150%;
+    font-family: "Iosevka Etoile", serif;
+}
+</style>
diff --git a/client/src/components/HelloWorld.vue b/client/src/components/HelloWorld.vue
deleted file mode 100644
index 649a596..0000000
--- a/client/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<div class="hello">
-  <h1>{{ msg }}</h1>
-  <p>
-    For a guide and recipes on how to configure / customize this project,<br>
-    check out the
-    <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-  </p>
-  <h3>Installed CLI Plugins</h3>
-  <ul>
-    <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-    <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-  </ul>
-  <h3>Essential Links</h3>
-  <ul>
-    <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-    <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-    <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-    <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-    <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-  </ul>
-  <h3>Ecosystem</h3>
-  <ul>
-    <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-    <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-    <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-    <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-    <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-  </ul>
-</div>
-</template>
-
-<script>
-export default {
-    name: 'HelloWorld',
-    props: {
-        msg: String
-    }
-}
-</script>
-
-<style scoped>
-h3 {
-    margin: 40px 0 0;
-}
-ul {
-    list-style-type: none;
-    padding: 0;
-}
-li {
-    display: inline-block;
-    margin: 0 10px;
-}
-a {
-    color: #42b983;
-}
-</style>