Remove nav logic from app component

Author: pieer

src/App.vue

@@ -1,121 +1,34 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link>
-      <router-link v-if="user" :to="{ name: 'dashboard' }"
-        >Dashboard</router-link
-      >
-      <template v-if="!user">
-        <router-link :to="{ name: 'authenticate' }" class="navButton">
-          <span>Login</span>
-        </router-link>
-      </template>
-
-      <template v-else>
-        <span>Hello, {{ user.name }}.</span>
-        <button type="button" @click="logout">Log out</button>
-      </template>
-    </div>
-    <router-view />
+    <app-nav />
+    <router-view class="page" />
   </div>
 </template>
 
 <script>
+import AppNav from './components/AppNav'
+
 export default {
-  computed: {
-    user() {
-      return this.$store.state.user
-    }
-  },
-  methods: {
-    logout() {
-      this.$store.dispatch('logout')
-    }
-  }
+  name: 'App',
+  components: { AppNav }
 }
 </script>
 
-<style>
+<style lang="scss">
+@import "./assets/styles/global.scss";
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
 }
-#nav {
+
+.page{
   display: flex;
-  flex-wrap: wrap;
-  padding: 0.2em;
-  margin-bottom: 3em;
-  background: linear-gradient(to right, #16c0b0, #84cf6a);
-}
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-  margin: auto 0.8em auto 0.4em;
-}
-#nav a.router-link-exact-active {
-  color: white;
-}
-#nav button {
-  color: #2c3e50;
-  background: white;
-  margin-left: auto;
-}
-#nav span {
-  margin: auto 1em auto 0em;
-}
-#nav a span {
-  vertical-align: middle;
-  margin: auto !important;
-}
-a:visited {
-  color: #2c3e50;
-}
-body {
-  padding: 0em;
-  margin: 0em;
-}
-button {
-  width: 5em;
-  height: 2em;
-  border-radius: 5%;
-  margin: 0.5em;
-  font-size: 1em;
-  color: white;
-  background: linear-gradient(to right, #16c0b0, #84cf6a);
-}
-form {
-  display: block;
-  width: 14em;
-  margin: auto;
-}
-form p {
-  color: red;
-}
-input {
-  display: block;
-  width: 100%;
-  height: 1.6em;
-  padding: 0.5em;
-  margin-bottom: 1em;
-  font: 1em 'Avenir', Helvetica, sans-serif;
-}
-.authLink {
-  font-size: 0.8em;
-  text-decoration: underline;
-  color: #2c3e50;
-}
-.navButton {
-  background: white;
-  color: #2c3e50 !important;
-  text-decoration: none;
-  font-size: 1em;
-  font-weight: 500 !important;
-  width: 5em;
-  height: 1.8em;
-  border-radius: 5%;
-  margin: 0.5em 0.5em 0.5em auto !important;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  min-height: calc(100vh - 56px);
 }
 </style>

src/components/AppNav.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="nav">
+    <router-link to="/">
+      Home
+    </router-link>
+
+    <template v-if="user">
+      <router-link to="dashboard">
+        Dashboard
+      </router-link>
+
+      <span class="nav-welcome">Hello, {{ user.name }}.</span>
+
+      <button type="button" @click="logout">
+        Log out
+      </button>
+    </template>
+
+    <template v-else>
+      <router-link to="authenticate" class="button">
+        Login
+      </router-link>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppNav',
+  computed: {
+    user () {
+      return this.$store.state.user
+    }
+  },
+  methods: {
+    logout () {
+      this.$store.dispatch('logout')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#nav {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.2em 1em;
+  background: linear-gradient(to right, #16c0b0, #84cf6a);
+}
+
+.nav-welcome {
+  margin-left: auto;
+  margin-right: 1rem;
+  color: white;
+}
+
+a {
+  font-weight: bold;
+  color: #2c3e50;
+  margin: auto 0.8em auto 0.4em;
+  text-decoration: none;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+
+.router-link-exact-active {
+  color: white;
+  border-bottom: 2px solid #fff;
+}
+
+button,
+.button {
+  margin-left: auto;
+  background: white;
+  text-decoration: none;
+  color: #2c3e50;
+
+  &.router-link-active {
+    color: #2c3e50;
+  }
+}
+
+.nav-welcome + button {
+  margin-left: 0;
+}
+</style>