mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-20 14:56:17 -04:00
feat(nav): navigation tooltips
This commit is contained in:
Corentin Thomasset
parent
50d2acaf3f
commit
b892f50cd6
2 changed files with 221 additions and 235 deletions
108
src/components/NavbarButtons.vue
Normal file
108
src/components/NavbarButtons.vue
Normal 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>
|
||||
|
|
@ -2,13 +2,14 @@
|
|||
import { NIcon } from 'naive-ui';
|
||||
import { h, ref, type Component } from 'vue';
|
||||
import { RouterLink, useRoute } from 'vue-router';
|
||||
import { Heart, BrandGithub, BrandTwitter, Moon, Sun, Menu2, Home2, InfoCircle } from '@vicons/tabler'
|
||||
import { Heart, Menu2, Home2 } from '@vicons/tabler'
|
||||
import { toolsByCategory } from '@/tools';
|
||||
import SearchBar from '../components/SearchBar.vue';
|
||||
import { useStyleStore } from '@/stores/style.store';
|
||||
import HeroGradient from '../assets/hero-gradient.svg?component'
|
||||
import { useThemeVars } from 'naive-ui'
|
||||
import MenuLayout from '../components/MenuLayout.vue'
|
||||
import NavbarButtons from '../components/NavbarButtons.vue'
|
||||
|
||||
const themeVars = useThemeVars()
|
||||
const activeKey = ref(null)
|
||||
|
|
@ -58,71 +59,7 @@ const m = toolsByCategory.map(category => ({
|
|||
v-if="styleStore.isSmallScreen"
|
||||
justify="center"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
<router-link
|
||||
to="/about"
|
||||
#="{ navigate, href }"
|
||||
custom
|
||||
>
|
||||
<n-button
|
||||
tag="a"
|
||||
:href="href"
|
||||
circle
|
||||
quaternary
|
||||
size="large"
|
||||
aria-label="Home"
|
||||
@click="navigate"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="InfoCircle"
|
||||
/>
|
||||
</n-button>
|
||||
</router-link>
|
||||
<n-button
|
||||
size="large"
|
||||
circle
|
||||
quaternary
|
||||
@click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
|
||||
>
|
||||
<n-icon
|
||||
v-if="styleStore.isDarkTheme"
|
||||
size="25"
|
||||
:component="Sun"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
size="25"
|
||||
:component="Moon"
|
||||
/>
|
||||
</n-button>
|
||||
<navbar-buttons />
|
||||
</n-space>
|
||||
|
||||
<n-menu
|
||||
|
|
@ -139,6 +76,11 @@ const m = toolsByCategory.map(category => ({
|
|||
|
||||
<template #content>
|
||||
<div class="navigation">
|
||||
<n-tooltip
|
||||
trigger="hover"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-button
|
||||
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
||||
circle
|
||||
|
|
@ -151,12 +93,17 @@ const m = toolsByCategory.map(category => ({
|
|||
:component="Menu2"
|
||||
/>
|
||||
</n-button>
|
||||
</template>
|
||||
Toggle menu
|
||||
</n-tooltip>
|
||||
|
||||
<router-link
|
||||
to="/"
|
||||
#="{ navigate, href }"
|
||||
custom
|
||||
>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
tag="a"
|
||||
:href="href"
|
||||
|
|
@ -171,11 +118,15 @@ const m = toolsByCategory.map(category => ({
|
|||
:component="Home2"
|
||||
/>
|
||||
</n-button>
|
||||
</template>
|
||||
Home
|
||||
</n-tooltip>
|
||||
</router-link>
|
||||
|
||||
<search-bar />
|
||||
|
||||
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button
|
||||
type="primary"
|
||||
tag="a"
|
||||
|
|
@ -190,80 +141,11 @@ const m = toolsByCategory.map(category => ({
|
|||
/>
|
||||
Sponsor
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="!styleStore.isSmallScreen"
|
||||
size="large"
|
||||
circle
|
||||
quaternary
|
||||
tag="a"
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="Github repository"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="BrandGithub"
|
||||
/>
|
||||
</n-button>
|
||||
<n-button
|
||||
v-if="!styleStore.isSmallScreen"
|
||||
size="large"
|
||||
circle
|
||||
quaternary
|
||||
tag="a"
|
||||
href="https://twitter.com/cthmsst"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="Twitter account"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="BrandTwitter"
|
||||
/>
|
||||
</n-button>
|
||||
</template>
|
||||
❤ Support IT Tools developement !
|
||||
</n-tooltip>
|
||||
|
||||
<router-link
|
||||
v-if="!styleStore.isSmallScreen"
|
||||
to="/about"
|
||||
#="{ navigate, href }"
|
||||
custom
|
||||
>
|
||||
<n-button
|
||||
tag="a"
|
||||
:href="href"
|
||||
circle
|
||||
quaternary
|
||||
size="large"
|
||||
aria-label="Home"
|
||||
@click="navigate"
|
||||
>
|
||||
<n-icon
|
||||
size="25"
|
||||
:component="InfoCircle"
|
||||
/>
|
||||
</n-button>
|
||||
</router-link>
|
||||
|
||||
<n-button
|
||||
v-if="!styleStore.isSmallScreen"
|
||||
size="large"
|
||||
circle
|
||||
quaternary
|
||||
aria-label="Toogle theme"
|
||||
@click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
|
||||
>
|
||||
<n-icon
|
||||
v-if="styleStore.isDarkTheme"
|
||||
size="25"
|
||||
:component="Sun"
|
||||
/>
|
||||
<n-icon
|
||||
v-else
|
||||
size="25"
|
||||
:component="Moon"
|
||||
/>
|
||||
</n-button>
|
||||
<navbar-buttons v-if="!styleStore.isSmallScreen" />
|
||||
</div>
|
||||
<slot />
|
||||
</template>
|
||||
|
|
@ -333,12 +215,8 @@ const m = toolsByCategory.map(category => ({
|
|||
justify-content: center;
|
||||
flex-direction: row;
|
||||
|
||||
&>*:not(:first-child) {
|
||||
margin-left: 10px;
|
||||
|
||||
.isSmallScreen & {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&>*:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue