From 1bdf23ac73fd25fed526246023a1415c376be97e Mon Sep 17 00:00:00 2001
From: Aleksei Tsybin <tsyalgen@yandex.ru>
Date: Mon, 28 Feb 2022 12:58:44 +0300
Subject: [PATCH] feature: settings page and button

---
 src/components/HeaderComponent.vue | 20 +++++++-------------
 src/router/index.js                |  5 +++++
 src/views/SettingsView.vue         | 11 +++++++++++
 3 files changed, 23 insertions(+), 13 deletions(-)
 create mode 100644 src/views/SettingsView.vue

diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index e3941cc..32ce6af 100644
--- a/src/components/HeaderComponent.vue
+++ b/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
-              :class="{ 'home-active': isAuth }"
-              class="settings-hover"
-              icon="cog"
-            ></b-icon>
+            <b-icon 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>
diff --git a/src/router/index.js b/src/router/index.js
index 40fd8c4..3a29e53 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
new file mode 100644
index 0000000..6ebcfce
--- /dev/null
+++ b/src/views/SettingsView.vue
@@ -0,0 +1,11 @@
+<template>
+  <h2>settings</h2>
+</template>
+
+<script>
+export default {
+  name: 'SettingsView',
+}
+</script>
+
+<style scoped></style>