blob: cbb5631563159bbd9bc5d6e6c624e58a82a80998 (
plain) (
blame)
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
98
99
100
101
102
103
104
105
106
107
108
|
<template>
<n-tooltip trigger="hover">
<template #trigger>
<n-button
size="large"
circle
quaternary
tag="a"
href="https://github.com/CorentinTh/it-tools"
rel="noopener"
target="_blank"
>
<n-icon
size="25"
:component="BrandGithub"
/>
</n-button>
</template>
Github repository
</n-tooltip>
<n-tooltip trigger="hover">
<template #trigger>
<n-button
size="large"
circle
quaternary
tag="a"
href="https://twitter.com/cthmsst"
rel="noopener"
target="_blank"
>
<n-icon
size="25"
:component="BrandTwitter"
/>
</n-button>
</template>
Creator twitter
</n-tooltip>
<router-link
to="/about"
#="{ navigate, href }"
custom
>
<n-tooltip trigger="hover">
<template #trigger>
<n-button
tag="a"
:href="href"
circle
quaternary
size="large"
aria-label="Home"
@click="navigate"
>
<n-icon
size="25"
:component="InfoCircle"
/>
</n-button>
</template>
About
</n-tooltip>
</router-link>
<n-tooltip trigger="hover">
<template #trigger>
<n-button
size="large"
circle
quaternary
@click="isDarkTheme = !isDarkTheme"
>
<n-icon
v-if="isDarkTheme"
size="25"
:component="Sun"
/>
<n-icon
v-else
size="25"
:component="Moon"
/>
</n-button>
</template>
<span v-if="isDarkTheme">Light mode</span>
<span v-else>Dark mode</span>
</n-tooltip>
</template>
<script setup lang="ts">
import { useStyleStore } from '@/stores/style.store';
import { toRefs } from 'vue';
import { BrandGithub, BrandTwitter, Moon, Sun, InfoCircle } from '@vicons/tabler'
const styleStore = useStyleStore()
const { isDarkTheme } = toRefs(styleStore)
</script>
<style lang="less" scoped>
.n-button {
&:not(:last-child) {
margin-right: 5px;
}
}
</style>
|
