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 { NIcon } from 'naive-ui';
|
||||||
import { h, ref, type Component } from 'vue';
|
import { h, ref, type Component } from 'vue';
|
||||||
import { RouterLink, useRoute } from 'vue-router';
|
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 { toolsByCategory } from '@/tools';
|
||||||
import SearchBar from '../components/SearchBar.vue';
|
import SearchBar from '../components/SearchBar.vue';
|
||||||
import { useStyleStore } from '@/stores/style.store';
|
import { useStyleStore } from '@/stores/style.store';
|
||||||
import HeroGradient from '../assets/hero-gradient.svg?component'
|
import HeroGradient from '../assets/hero-gradient.svg?component'
|
||||||
import { useThemeVars } from 'naive-ui'
|
import { useThemeVars } from 'naive-ui'
|
||||||
import MenuLayout from '../components/MenuLayout.vue'
|
import MenuLayout from '../components/MenuLayout.vue'
|
||||||
|
import NavbarButtons from '../components/NavbarButtons.vue'
|
||||||
|
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
const activeKey = ref(null)
|
const activeKey = ref(null)
|
||||||
|
|
@ -58,71 +59,7 @@ const m = toolsByCategory.map(category => ({
|
||||||
v-if="styleStore.isSmallScreen"
|
v-if="styleStore.isSmallScreen"
|
||||||
justify="center"
|
justify="center"
|
||||||
>
|
>
|
||||||
<n-button
|
<navbar-buttons />
|
||||||
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>
|
|
||||||
</n-space>
|
</n-space>
|
||||||
|
|
||||||
<n-menu
|
<n-menu
|
||||||
|
|
@ -139,6 +76,11 @@ const m = toolsByCategory.map(category => ({
|
||||||
|
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
|
<n-tooltip
|
||||||
|
trigger="hover"
|
||||||
|
placement="bottom-start"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
<n-button
|
<n-button
|
||||||
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
||||||
circle
|
circle
|
||||||
|
|
@ -151,12 +93,17 @@ const m = toolsByCategory.map(category => ({
|
||||||
:component="Menu2"
|
:component="Menu2"
|
||||||
/>
|
/>
|
||||||
</n-button>
|
</n-button>
|
||||||
|
</template>
|
||||||
|
Toggle menu
|
||||||
|
</n-tooltip>
|
||||||
|
|
||||||
<router-link
|
<router-link
|
||||||
to="/"
|
to="/"
|
||||||
#="{ navigate, href }"
|
#="{ navigate, href }"
|
||||||
custom
|
custom
|
||||||
>
|
>
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
<n-button
|
<n-button
|
||||||
tag="a"
|
tag="a"
|
||||||
:href="href"
|
:href="href"
|
||||||
|
|
@ -171,11 +118,15 @@ const m = toolsByCategory.map(category => ({
|
||||||
:component="Home2"
|
:component="Home2"
|
||||||
/>
|
/>
|
||||||
</n-button>
|
</n-button>
|
||||||
|
</template>
|
||||||
|
Home
|
||||||
|
</n-tooltip>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<search-bar />
|
<search-bar />
|
||||||
|
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
<n-button
|
<n-button
|
||||||
type="primary"
|
type="primary"
|
||||||
tag="a"
|
tag="a"
|
||||||
|
|
@ -190,80 +141,11 @@ const m = toolsByCategory.map(category => ({
|
||||||
/>
|
/>
|
||||||
Sponsor
|
Sponsor
|
||||||
</n-button>
|
</n-button>
|
||||||
<n-button
|
</template>
|
||||||
v-if="!styleStore.isSmallScreen"
|
❤ Support IT Tools developement !
|
||||||
size="large"
|
</n-tooltip>
|
||||||
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>
|
|
||||||
|
|
||||||
<router-link
|
<navbar-buttons v-if="!styleStore.isSmallScreen" />
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -333,12 +215,8 @@ const m = toolsByCategory.map(category => ({
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
&>*:not(:first-child) {
|
&>*:not(:last-child) {
|
||||||
margin-left: 10px;
|
margin-right: 5px;
|
||||||
|
|
||||||
.isSmallScreen & {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue