feat: get list category for navbar

src/api/homeRepository.ts

@@ -1,10 +1,14 @@
 import AxiosClient from "./axios";
 
 const resource = "/index";
+const resourceCategory = "/categories";
 
 export default {
   get() {
     return AxiosClient.get(`${resource}`);
+  },
+  getCategory() {
+    return AxiosClient.get(`${resourceCategory}`)
   }
 }
 

src/components/Navbar/MutilTab.vue

@@ -0,0 +1,52 @@
+<template lang="">
+  <div class="relative">
+    <div 
+      class="hover:text-gray-400 cursor-pointer flex items-center gap-1"
+      @mouseenter="mouseEnter"
+      @mouseleave="mouseLeave"
+    >
+      {{ props.name }}
+      <Icon icon="pi-sort-down-fill" class="text-[#a6adc9] text-[0.6rem]"/>
+    </div>
+    <div 
+      v-if="isShow" 
+      @mouseenter="mouseEnter"
+      @mouseleave="mouseLeave"
+      class="w-fit absolute max-h-[24rem] top-4 left-0 shadow-lg bg-white rounded overflow-y-auto"
+    >
+      <router-link
+        v-for="item in props.childrenNode"
+        :to="{ name: 'exercise', params: { classId: item.slug } }"
+        :key="item.slug"
+        class="p-2 text-nowrap text-[#606266] text-[0.7rem] cursor-pointer hover:bg-slate-100/80 block"
+      >
+        {{ item.name }}
+      </router-link>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  import Icon from "@/components/Icon.vue";
+  
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true,
+    },
+    childrenNode: {
+      type: Array,
+      required: true,
+    }
+  }); 
+  const isShow = ref(false);
+
+  function mouseEnter() {
+    isShow.value = true;
+  }
+  function mouseLeave() {
+    isShow.value = false;
+  }
+</script>

src/components/Navbar/Navbar.vue

@@ -0,0 +1,46 @@
+<template lang="">
+  <div class="text-xs hidden lg:flex uppercase font-semibold justify-between items-center flex-1">
+    <div class="flex gap-5">
+      <div
+        v-for="cate in categoryData.value"
+        :key="cate.id"
+      >
+        <SingleTab 
+          v-if="cate.children.length <= 0"
+          :name="cate.name"
+          :classId="cate.slug"
+        />
+        <MutilTab 
+          v-else
+          :name="cate.name"
+          :children-node="cate.children"
+        />
+
+      </div>
+    </div>
+    <Searchbar/>
+  </div>
+
+  <div class="flex lg:hidden justify-end flex-1 cursor-pointer">
+    <Icon icon="pi-bars" className="text-xl"/>
+  </div>
+</template>
+
+<script setup>
+  import Searchbar from "@/components/Navbar/Searchbar.vue";
+  import Icon from "@/components/Icon.vue";
+  import { RepositoryFactory } from "@/api/RepositoryFactory";
+  import { onMounted, reactive } from "vue";
+  import SingleTab from "@/components/Navbar/SingleTab.vue";
+  import MutilTab from "@/components/Navbar/MutilTab.vue";
+
+  const categoryData = reactive([]);
+
+  onMounted(async ()=> {
+    const HomeRepository = RepositoryFactory.get("home");
+    const { data } = await HomeRepository.getCategory();
+    categoryData.value = data;
+
+    console.log(categoryData.value);
+  });
+</script>

src/components/Navbar/SingleTab.vue

@@ -0,0 +1,21 @@
+<template lang="">
+  <router-link 
+    :to="{ name: 'exercise', params: { classId: props.classId } }"
+    class="hover:text-gray-400"
+  >
+    {{ props.name }}
+  </router-link>
+</template>
+
+<script setup>
+  const props = defineProps({
+    name: {
+      type: String,
+      required: true,
+    },
+    classId: {
+      type: String,
+      required: true,
+    },
+  }); 
+</script>

src/layout/Header.vue

@@ -1,6 +1,6 @@
 <script setup>
   import Logo from "@/components/Logo.vue";
-  import Navbar from "@/components/Navbar.vue";
+  import Navbar from "@/components/Navbar/Navbar.vue";
 </script>
 
 <template lang="">

src/views/DoExercisePage.vue

@@ -3,7 +3,7 @@
     <div class="md:w-9/12 rounded  mx-auto box-shadow bg-white text-[#606266] flex flex-col">
       <div v-if="!loadingStore.isLoading && examData">
         <Title :name="examData.value.exam.name"/>
-        <div class="md:px-4 px-2 text-lg mb-8">
+        <div class="md:px-4 px-2 text-base mb-8">
           <i class="font-medium" v-html="examData.value.exam.pages[0].note">
           </i>
           <div class="my-3">