Sort of working beta

resources/js/Layouts/JobLayout.vue

@@ -4,12 +4,17 @@ import BaseLayout from "./BaseLayout.vue";
 import MainNavJobLink from "@/Components/Layout/MainNav/MainNavJobLink.vue";
 import { Job } from "@/types/Jobs/job";
 import MainNavItem from "@/Components/Layout/MainNav/MainNavItem.vue";
+import { httpApi } from "@/lib/utils";
+import { onMounted, ref } from "vue";
 
-let jobs = [
-    { id: 1, name: "Hellcase" },
-    { id: 2, name: "Jeu gratuit Epic Games" },
-    { id: 3, name: "Envoyer un post instagram" },
-];
+const jobs = ref<Job[]>([]);
+
+async function fetchJobs() {
+    let jobsRaw = await httpApi<Job[]>("/jobs");
+    jobs.value = jobsRaw.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+}
+
+onMounted(fetchJobs);
 </script>
 
 <template>
@@ -19,16 +24,16 @@ let jobs = [
                 <ul class="flex flex-col gap-2">
                     <MainNavItem link="/"> Accueil </MainNavItem>
                     <MainNavJobLink
-                        :job="job as Job"
                         v-for="job in jobs"
                         :key="job.id"
+                        :job="job"
                     />
                 </ul>
             </nav>
         </ScrollArea>
 
         <ScrollArea class="flex-1 h-full overflow-auto">
-            <main>
+            <main class="p-3">
                 <slot />
             </main>
         </ScrollArea>