Merge pull request #3 from ZorgCC/develop

feature: settings page and button
This commit is contained in:
Aleksei Tsybin 2022-02-28 16:08:37 +03:00 committed by GitHub
commit 5df9fe2724
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 13 deletions

View File

@ -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>

View File

@ -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({

View File

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