feat : first commit

frontend/layouts/auth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-primary-500 from-primary-50 via-white to-neutral-100 text-neutral-900">
+  <div class="min-h-screen bg-tertiary-500 from-tertiary-50 via-white to-neutral-100 text-neutral-900">
     <main class="mx-auto flex min-h-screen w-full max-w-[720px] items-center px-6 py-12">
       <slot />
     </main>

frontend/layouts/default.vue

@@ -1,11 +1,64 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  $END$
+    <div class="min-h-screen">
+        <div class="flex min-h-screen">
+      <aside class="flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500 no-print">
+                <div>
+                    <img src="/malio.png" alt="Logo" class="w-auto"/>
+                </div>
+                <nav class="flex-1 px-4 pb-6">
+                    <NuxtLink
+                        to="/"
+                        class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600 border-t border-secondary-500"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Tableau de bord
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/calendar"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Calendrier
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/employees"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Employés
+                    </NuxtLink>
+                    <NuxtLink
+                        to="/absence-types"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Types d'absence
+                    </NuxtLink>
+                </nav>
+
+                <div class="p-4">
+                    <button
+                        type="button"
+                        class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
+                        @click="handleLogout"
+                    >
+                        Déconnexion
+                    </button>
+                </div>
+            </aside>
+
+            <main class="flex-1 px-8 py-8">
+                <slot/>
+            </main>
+        </div>
+    </div>
 </template>
 
-<style scoped>
+<script setup lang="ts">
+const auth = useAuthStore()
 
-</style>
+const handleLogout = async () => {
+    await auth.logout()
+    await navigateTo('/login')
+}
+</script>