feat(core): add custom top menu & tooltips ✨

Author: PierreBrisorgueil

src/modules/_core/components/core.header.component.vue

@@ -24,14 +24,36 @@
       <router-link to="/">{{ config.app.title }}</router-link>
     </v-toolbar-title>
     <div class="flex-grow-1"></div>
-    <v-btn v-if="!isLoggedIn" icon>
-      <router-link to="/signin">
-        <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-user</v-icon>
-      </router-link>
-    </v-btn>
-    <v-btn v-else @click="signout" icon>
-      <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-arrow-right</v-icon>
-    </v-btn>
+    <!-- custom menu -->
+    <v-tooltip v-for="({ icon, title, link }, i) in links" :key="i" bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn v-bind="attrs" v-on="on" min-width="50" min-height="50" x-small icon>
+          <a :href="link">
+            <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">{{icon}}</v-icon>
+          </a>
+        </v-btn>
+      </template>
+      <span>{{title}}</span>
+    </v-tooltip>
+    <!-- user menu -->
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn v-if="!isLoggedIn" v-bind="attrs" v-on="on" min-width="50" min-height="50" x-small icon>
+          <router-link to="/signin">
+            <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-user</v-icon>
+          </router-link>
+        </v-btn>
+      </template>
+      <span>Sign In</span>
+    </v-tooltip>
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn v-if="isLoggedIn" @click="signout" v-bind="attrs" v-on="on" min-width="50" min-height="50" x-small icon>
+          <v-icon :style="{color: config.vuetify.theme.themes[theme].onPrimary}">fa-arrow-right</v-icon>
+        </v-btn>
+      </template>
+      <span>Sign Out</span>
+    </v-tooltip>
   </v-app-bar>
 </template>
 <script>
@@ -45,6 +67,42 @@ import { mapGetters } from 'vuex';
  */
 export default {
   name: 'waosHeader',
+  data() {
+    return {
+      links: [
+        {
+          icon: 'fab fa-github',
+          title: 'Github',
+          link: 'https://github.com/weareopensource/',
+        },
+        {
+          icon: 'fab fa-docker',
+          title: 'Docker Hub',
+          link: 'https://hub.docker.com/orgs/weareopensource/repositories',
+        },
+        {
+          icon: 'fab fa-github-alt',
+          title: 'Github projects',
+          link: 'https://github.com/WeAreOpenSourceProjects',
+        },
+        {
+          icon: 'fab fa-discord',
+          title: 'Discord',
+          link: 'https://discord.gg/U2a2vVm',
+        },
+        {
+          icon: 'fab fa-slack',
+          title: 'Slack',
+          link: 'https://join.slack.com/t/weareopensource/shared_invite/zt-62p1qxna-PEQn289qx6mmHobzKW8QFw',
+        },
+        {
+          icon: 'fab fa-twitter',
+          title: 'Twitter',
+          link: 'https://twitter.com/waos_io',
+        },
+      ],
+    };
+  },
   computed: {
     ...mapGetters(['theme', 'isLoggedIn']),
     drawer: {

src/modules/_core/components/core.nav.component.vue

@@ -21,9 +21,15 @@
         <v-list-item-action
           :style="(config.vuetify.theme.navigation.selectBorder && testRoute(item.path, $route.path)) ? 'margin-left: -4px;' : 'margin-left: -4px;'"
         >
-          <v-icon
-            :style="{color: config.vuetify.theme.themes[theme].onPrimary}"
-          >fa-{{ item.meta.icon }}</v-icon>
+          <v-tooltip right>
+            <template v-slot:activator="{ on, attrs }">
+              <v-icon
+                v-bind="attrs" v-on="on"
+                :style="{color: config.vuetify.theme.themes[theme].onPrimary}"
+              >fa-{{ item.meta.icon }}</v-icon>
+            </template>
+            <span>{{item.name}}</span>
+          </v-tooltip>
         </v-list-item-action>
         <v-list-item-content>
           <v-list-item-title