Init commit

resources/js/Layouts/BaseLayout.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import AppLogo from "@/Components/Layout/AppLogo.vue";
+import Card from "@/Components/ui/card/Card.vue";
+import CardContent from "@/Components/ui/card/CardContent.vue";
+import CardHeader from "@/Components/ui/card/CardHeader.vue";
+import { Link } from "@inertiajs/vue3";
+
+defineOptions({
+    inheritAttrs: false,
+});
+</script>
+
+<template>
+    <section class="bg-background p-3 border-2 flex justify-center items-center">
+        <Card
+            class="w-[95dvw] md:w-[80dvw] md:max-w-[60em] h-[90dvh] max-h-[200em] flex flex-col justify-stretch"
+        >
+            <CardHeader>
+                <nav class="flex justify-between items-center p-3">
+                    <Link href="/">
+                        <AppLogo />
+                    </Link>
+                </nav>
+            </CardHeader>
+
+            <CardContent v-bind="$attrs" class="flex-1 min-h-0 overflow-auto">
+                <slot />
+            </CardContent>
+        </Card>
+    </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+    width: 100dvw;
+    height: 100dvh;
+}
+</style>

resources/js/Layouts/JobLayout.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import ScrollArea from "@/Components/ui/scroll-area/ScrollArea.vue";
+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";
+
+let jobs = [
+    { id: 1, name: "Hellcase" },
+    { id: 2, name: "Jeu gratuit Epic Games" },
+    { id: 3, name: "Envoyer un post instagram" },
+];
+</script>
+
+<template>
+    <BaseLayout class="flex justify-stretch items-start gap-3">
+        <ScrollArea class="h-full w-50 overflow-auto">
+            <nav class="p-3">
+                <ul class="flex flex-col gap-2">
+                    <MainNavItem link="/"> Accueil </MainNavItem>
+                    <MainNavJobLink
+                        :job="job as Job"
+                        v-for="job in jobs"
+                        :key="job.id"
+                    />
+                </ul>
+            </nav>
+        </ScrollArea>
+
+        <ScrollArea class="flex-1 h-full overflow-auto">
+            <main>
+                <slot />
+            </main>
+        </ScrollArea>
+    </BaseLayout>
+</template>