mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-23 00:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(nav): navigation tooltips

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-16 11:13:30 +02:00
parent 50d2acaf3f
commit b892f50cd6
No known key found for this signature in database
GPG key ID: DBD997E935996158
2 changed files with 221 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/components/NavbarButtons.vue Normal file
View file

@ -0,0 +1,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>