feat(nav): navigation tooltips

src/components/NavbarButtons.vue

@@ -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> 

src/layouts/base.layout.vue

@@ -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
+          <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-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
+          </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>
       <slot />
     </template>
@@ -333,12 +215,8 @@ const m = toolsByCategory.map(category => ({
   justify-content: center;
   flex-direction: row;
 
-    &>*:not(:first-child) {
+  &>*:not(:last-child) {
-        margin-left: 10px;
+    margin-right: 5px;
-
-        .isSmallScreen & {
-            margin-left: 5px;
-        }
   }