feat(nav): navigation tooltips
This commit is contained in:
Corentin Thomasset
parent
50d2acaf3f
commit
b892f50cd6
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)
|
||||||
@ -19,14 +20,14 @@ const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { de
|
|||||||
const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) })
|
const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) })
|
||||||
|
|
||||||
const m = toolsByCategory.map(category => ({
|
const m = toolsByCategory.map(category => ({
|
||||||
label: category.name,
|
label: category.name,
|
||||||
key: category.name,
|
key: category.name,
|
||||||
type: 'group',
|
type: 'group',
|
||||||
children: category.components.map(({ name, path, icon }) => ({
|
children: category.components.map(({ name, path, icon }) => ({
|
||||||
label: makeLabel(name, path),
|
label: makeLabel(name, path),
|
||||||
icon: makeIcon(icon),
|
icon: makeIcon(icon),
|
||||||
key: name
|
key: name
|
||||||
}))
|
}))
|
||||||
}))
|
}))
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -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,131 +76,76 @@ const m = toolsByCategory.map(category => ({
|
|||||||
|
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
<n-button
|
<n-tooltip
|
||||||
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
trigger="hover"
|
||||||
circle
|
placement="bottom-start"
|
||||||
quaternary
|
|
||||||
aria-label="Toogle menu"
|
|
||||||
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
|
|
||||||
>
|
>
|
||||||
<n-icon
|
<template #trigger>
|
||||||
size="25"
|
<n-button
|
||||||
:component="Menu2"
|
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
||||||
/>
|
circle
|
||||||
</n-button>
|
quaternary
|
||||||
|
aria-label="Toogle menu"
|
||||||
|
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
size="25"
|
||||||
|
:component="Menu2"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
Toggle menu
|
||||||
|
</n-tooltip>
|
||||||
|
|
||||||
<router-link
|
<router-link
|
||||||
to="/"
|
to="/"
|
||||||
#="{ navigate, href }"
|
#="{ navigate, href }"
|
||||||
custom
|
custom
|
||||||
>
|
>
|
||||||
<n-button
|
<n-tooltip trigger="hover">
|
||||||
tag="a"
|
<template #trigger>
|
||||||
:href="href"
|
<n-button
|
||||||
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
tag="a"
|
||||||
circle
|
:href="href"
|
||||||
quaternary
|
:size="styleStore.isSmallScreen ? 'medium' : 'large'"
|
||||||
aria-label="Home"
|
circle
|
||||||
@click="navigate"
|
quaternary
|
||||||
>
|
aria-label="Home"
|
||||||
<n-icon
|
@click="navigate"
|
||||||
size="25"
|
>
|
||||||
:component="Home2"
|
<n-icon
|
||||||
/>
|
size="25"
|
||||||
</n-button>
|
:component="Home2"
|
||||||
|
/>
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
Home
|
||||||
|
</n-tooltip>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<search-bar />
|
<search-bar />
|
||||||
|
|
||||||
|
<n-tooltip trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
|
<n-button
|
||||||
|
type="primary"
|
||||||
|
tag="a"
|
||||||
|
href="https://github.com/sponsors/CorentinTh"
|
||||||
|
rel="noopener"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<n-icon
|
||||||
|
v-if="!styleStore.isSmallScreen"
|
||||||
|
:component="Heart"
|
||||||
|
style="margin-right: 5px;"
|
||||||
|
/>
|
||||||
|
Sponsor
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
❤ Support IT Tools developement !
|
||||||
|
</n-tooltip>
|
||||||
|
|
||||||
<n-button
|
<navbar-buttons v-if="!styleStore.isSmallScreen" />
|
||||||
type="primary"
|
|
||||||
tag="a"
|
|
||||||
href="https://github.com/sponsors/CorentinTh"
|
|
||||||
rel="noopener"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<n-icon
|
|
||||||
v-if="!styleStore.isSmallScreen"
|
|
||||||
:component="Heart"
|
|
||||||
style="margin-right: 5px;"
|
|
||||||
/>
|
|
||||||
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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
<slot />
|
||||||
</template>
|
</template>
|
||||||
@ -283,68 +165,64 @@ const m = toolsByCategory.map(category => ({
|
|||||||
// }
|
// }
|
||||||
|
|
||||||
.sider-content {
|
.sider-content {
|
||||||
padding-top: 160px;
|
padding-top: 160px;
|
||||||
padding-bottom: 200px;
|
padding-bottom: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-wrapper {
|
.hero-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.gradient {
|
||||||
|
margin-top: -65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 10;
|
text-align: center;
|
||||||
overflow: hidden;
|
top: 16px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
.gradient {
|
.title {
|
||||||
margin-top: -65px;
|
font-size: 25px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-wrapper {
|
.divider {
|
||||||
position: absolute;
|
width: 50px;
|
||||||
left: 0;
|
height: 2px;
|
||||||
width: 100%;
|
border-radius: 4px;
|
||||||
text-align: center;
|
background-color: v-bind('themeVars.primaryColor');
|
||||||
top: 16px;
|
margin: 0 auto 5px;
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 25px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
width: 50px;
|
|
||||||
height: 2px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: v-bind('themeVars.primaryColor');
|
|
||||||
margin: 0 auto 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation {
|
.navigation {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.search-bar {
|
.search-bar {
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user