feat: abstract articles navigation

src/components/ArticlesNavigation.vue

@@ -0,0 +1,69 @@
+<template>
+  <ul class="nav nav-pills outline-active">
+    <li
+      v-for="link in links"
+      :key="link.type"
+      class="nav-item"
+    >
+      <RouterLink
+        class="nav-link"
+        active-class="active"
+        :to="link.href"
+      >
+        <i
+          v-if="link.icon"
+          :class="link.icon"
+        /> {{ link.title }}
+      </RouterLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, toRefs } from 'vue'
+
+type ArticleNavLinkType = 'globalFeed' | 'myFeed' | 'tag' | 'author' | 'favorited'
+
+interface ArticleNavLink {
+  type: ArticleNavLinkType
+  href: string
+  title: string
+  icon?: string
+}
+
+export default defineComponent({
+  name: 'ArticleNavigation',
+  props: {
+    useGlobalFeed: { type: Boolean, default: false },
+    useMyFeed: { type: Boolean, default: false },
+    useTag: { type: String, default: '' },
+    useAuthor: { type: String, default: '' },
+    useFavorited: { type: String, default: '' },
+  },
+  setup (props) {
+    const { useGlobalFeed, useMyFeed, useTag, useAuthor, useFavorited } = toRefs(props)
+
+    const allLinks = computed<ArticleNavLink[]>(() => [
+      { type: 'globalFeed', href: '/', title: 'Global Feed' },
+      { type: 'myFeed', href: '/my-feeds', title: 'Your Feed' },
+      { type: 'tag', href: `/tag/${useTag.value}`, title: useTag.value, icon: 'ion-pound' },
+      { type: 'author', href: `/@${useAuthor.value}`, title: 'My articles' },
+      { type: 'favorited', href: `/@${useFavorited.value}/favorites`, title: 'Favorited Articles' },
+    ])
+
+    const show = computed<Record<ArticleNavLinkType, boolean>>(() => ({
+      globalFeed: useGlobalFeed.value,
+      myFeed: useMyFeed.value,
+      tag: useTag.value !== '',
+      author: useAuthor.value !== '',
+      favorited: useFavorited.value !== '',
+    }))
+
+    const links = computed<ArticleNavLink[]>(() => allLinks.value.filter(link => show.value[link.type]))
+
+    return {
+      links,
+    }
+  },
+})
+</script>

src/pages/Home.vue

@@ -13,20 +13,15 @@
       <div class="row">
         <div class="col-md-9">
           <div class="feed-toggle">
-            <ul class="nav nav-pills outline-active">
-              <li class="nav-item">
-                <a
-                  class="nav-link disabled"
-                  href=""
-                >Your Feed</a>
-              </li>
-              <li class="nav-item">
-                <a
-                  class="nav-link active"
-                  href=""
-                >Global Feed</a>
-              </li>
-            </ul>
+            <!-- use-author and use-favorited just for test now -->
+            <!-- use them for profile page -->
+            <ArticlesNavigation
+              use-global-feed
+              :use-my-feed="userAuthorized"
+              :use-tag="tag"
+              :use-author="username"
+              :use-favorited="username"
+            />
           </div>
 
           <ArticlePreview
@@ -54,10 +49,13 @@
 
 <script lang="ts">
 import ArticlePreview from '../components/ArticlePreview.vue'
+import ArticlesNavigation from '../components/ArticlesNavigation.vue'
 import Pagination from '../components/Pagination.vue'
 import PopularTags from '../components/PopularTags.vue'
 import { useArticles } from '../services/article/getArticle'
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useStore } from 'vuex'
 
 export default defineComponent({
   name: 'Home',
@@ -65,9 +63,18 @@ export default defineComponent({
     ArticlePreview,
     Pagination,
     PopularTags,
+    ArticlesNavigation,
   },
   setup () {
     const { articlesCount, articles, page } = useArticles()
+    const route = useRoute()
+    const store = useStore()
+
+    const tag = computed<string>(() => route.params.tag as string)
+
+    const userAuthorized = computed<boolean>(() => store.state.user !== null)
+
+    const username = computed<string>(() => (store.state.user?.username as string) ?? '')
 
     const onPageChange = (index: number) => {
       page.value = index
@@ -78,6 +85,9 @@ export default defineComponent({
       articlesCount,
       page,
       onPageChange,
+      tag,
+      userAuthorized,
+      username,
     }
   },
 })