-
Notifications
You must be signed in to change notification settings - Fork 7
/
Navbar.vue
97 lines (84 loc) · 1.72 KB
/
Navbar.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<template>
<div class="navbar">
<div class="navbar-end">
<div
class="buttons"
v-if="auth"
>
<router-link
class="button"
to="/posts/new"
>
New Post
</router-link>
<button
class="button"
@click="signOut"
>
Sign Out
</button>
</div>
<div
class="buttons"
v-else
>
<button
class="button"
data-test="sign-up"
@click="signUp"
>
Sign Up
</button>
<button
class="button"
@click="signIn"
>
Sign In
</button>
</div>
</div>
</div>
<teleport to="#modal">
<component :is="component" />
</teleport>
</template>
<script lang="ts">
import { computed, defineComponent, h, markRaw } from 'vue';
import { useRouter } from 'vue-router'
import Signup from './Signup.vue'
import Signin from './Signin.vue'
import { useModal } from '../useModal'
import { useStore } from '../store'
export default defineComponent({
components: {
Signup
},
setup() {
const modal = useModal()
const store = useStore()
const router = useRouter()
const auth = computed(() => {
return !!store.getState().authors.currentUserId
})
const signIn = () => {
modal.component.value = markRaw(Signin)
modal.showModal()
}
const signUp = () => {
modal.component.value = markRaw(Signup)
modal.showModal()
}
const signOut = () => {
store.signOut()
router.push('/')
}
return {
component: modal.component,
signIn,
signUp,
signOut,
auth,
}
}
});
</script>