mirror of
https://github.com/ZorgCC/psina-avatar-frontend.git
synced 2025-06-06 02:22:03 +03:00
feature: settings page and button
This commit is contained in:
parent
9f75dccfd0
commit
1bdf23ac73
@ -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>
|
||||
|
@ -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({
|
||||
|
11
src/views/SettingsView.vue
Normal file
11
src/views/SettingsView.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<h2>settings</h2>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SettingsView',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
Loading…
x
Reference in New Issue
Block a user