Merge pull request #3 from ZorgCC/develop

feature: settings page and button

src/components/HeaderComponent.vue

@@ -7,6 +7,7 @@
     </template>
     <template #start>
       <b-navbar-item
+        v-if="isAuth"
         class="is-link"
         exact-active-class="home-active"
         tag="router-link"
@@ -37,20 +38,16 @@
       <b-navbar-item tag="div">
         <div class="buttons">
           <router-link
-            class="button is-light has-background-white is-rounded"
+            v-if="isAuth"
+            class="button is-light is-rounded"
+            active-class="home-active"
             :to="{ name: 'settings' }"
           >
-            <!-- TODO create route setting -->
+            <b-icon icon="cog"></b-icon>
-            <b-icon
-              :class="{ 'home-active': isAuth }"
-              class="settings-hover"
-              icon="cog"
-            ></b-icon>
           </router-link>
           <b-button
             v-if="isAuth"
             class="button is-light is-rounded"
-            active-class="login-active"
             @click="isAuth = false"
           >
             Log out
@@ -73,19 +70,16 @@ export default {
   name: 'HeaderComponent',
   data() {
     return {
-      isAuth: false,
+      isAuth: true,
     }
   },
 }
 </script>
 <style lang="scss" scoped>
 .home-active {
-  color: orange;
+  color: orange !important;
 }
 .login-active {
   border-color: orange !important;
 }
-.settings-hover:hover {
-  color: orange;
-}
 </style>

src/router/index.js

@@ -14,6 +14,11 @@ const routes = [
     name: 'login',
     component: () => import('../views/LoginView.vue'),
   },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: () => import('../views/SettingsView.vue'),
+  },
 ]
 
 const router = new VueRouter({

src/views/SettingsView.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2>settings</h2>
+</template>
+
+<script>
+export default {
+  name: 'SettingsView',
+}
+</script>
+
+<style scoped></style>