Get allFiles and switch files tag, done.

src/components/Navbar.vue

@@ -4,11 +4,11 @@
       <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
         <div class="flex flex-1 items-center">
             <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
-            <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300">
-              <li class="px-2 py-3.5">ALL</li>
-              <li>DISCOVER</li>
-              <li>COMPARE</li>
-            <li>DESIGN</li>
+            <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
+              <li @click="changeViewType('all')">ALL</li>
+              <li @click="changeViewType('discover')">DISCOVER</li>
+              <li @click="changeViewType('compare')">COMPARE</li>
+            <li @click="changeViewType('disign')">DESIGN</li>
           </ul>
         </div>
         <div class="flex justify-end items-center">
@@ -42,6 +42,14 @@ export default {
   data() {
     return {
       showNavbarBreadcrumb: false,
+      // 之後優化要模組化
+      // viewType:[
+      //   {
+      //     typeName: '',
+      //     typeCategory: [],
+      //   }
+      // ]
+      viewType: ''
     };
   },
   components: {
@@ -51,6 +59,11 @@ export default {
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
+  methods: {
+    changeViewType(type) {
+      this.viewType = type;
+    }
+  }
 }
 </script>