docs: add video courses link to nav (#460)

* docs: add video courses link to nav * 🐛 (header) remove header navigation unused code Co-authored-by: Yaël GUILLOUX <[email protected]>
nuxt-themes · Jun 17, 2021 · 9340ed2 · 9340ed2 · vercel · Jun 17, 2021
1 parent 75e37a6
commit 9340ed2
Showing 1 changed file with 14 additions and 17 deletions.
diff --git a/nuxtjs.org/components/HeaderNavigation.vue b/nuxtjs.org/components/HeaderNavigation.vue
@@ -2,11 +2,9 @@
   <div class="relative w-full h-full flex items-center justify-center">
     <ul class="flex space-x-12 h-full">
       <li
-        v-for="(link, index) in headerLinks"
+        v-for="link in headerLinks"
         :key="link.slug"
         class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center"
-        @mouseover="hoverLinks(index)"
-        @mouseleave="hover = false"
       >
         <NuxtLink
           :to="`/${link.slug}/${link.slug.includes('blog') ? '' : link.children[0].slug || ''}`"
@@ -18,21 +16,29 @@
           {{ link.title }}
         </NuxtLink>
       </li>
+      <li class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center">
+        <a
+          href="https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link"
+          class="hover:d-primary-text-hover"
+          target="_blank"
+          rel="noopener"
+        >
+          Video Courses
+        </a>
+      </li>
     </ul>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent, useRoute, ref, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent, useRoute, useContext } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   setup() {
     // @ts-ignore
     const { $docus } = useContext()
 
     const route = useRoute()
-    const hover = ref(false)
-    const itemIndex = ref(null)
     const currentNav = computed(() => $docus.get({ depth: 1 }).links)
 
     // computed
@@ -43,23 +49,14 @@ export default defineComponent({
         ? route.value.params.pathMatch.split('/')[0]
         : null
     })
-
-    // methods
-    function hoverLinks(index) {
-      itemIndex.value = index
-      hover.value = true
-    }
-
     return {
       headerLinks,
-      currentSlug,
-      hoverLinks,
-      hover,
-      itemIndex
+      currentSlug
     }
   }
 })
 </script>
+
 <style scoped lang="postcss">
 .nuxt-link-active {
   color: rgba(52, 211, 153);