feat : layout administration (WIP)

frontend/layouts/admin.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="min-h-screen bg-white text-neutral-900">
+        <header class="fixed top-0 left-0 right-0 z-50 border-b border-neutral-200 bg-primary-500 h-[85px]">
+            <div class="flex h-full w-full items-center px-6">
+                <NuxtLink to="/" class="flex items-center gap-3">
+          <span class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
+            LOGO
+          </span>
+                </NuxtLink>
+
+                <nav class="mx-8 flex flex-1 gap-8 text-2xl font-bold uppercase text-white"></nav>
+
+                <NuxtLink to="/" class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80">
+                    Quitter le panel admin
+                </NuxtLink>
+            </div>
+        </header>
+
+        <aside
+            class="fixed left-0 top-[85px] z-40 w-64 h-[calc(100vh-85px)] bg-primary-500 text-white flex flex-col"
+        >
+            <div class="flex-1 overflow-y-auto p-4 space-y-4">
+                Dashboard
+            </div>
+
+            <div class="p-4 border-t border-neutral-700">
+                <button
+                    @click="handleLogout"
+                    class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
+                >
+                    Déconnexion
+                </button>
+            </div>
+        </aside>
+
+        <main class="pt-[85px] ml-64 px-6">
+            <div class="mx-auto w-full max-w-[1280px] py-6">
+                <slot/>
+            </div>
+        </main>
+    </div>
+</template>
+
+<script setup lang="ts">
+const handleLogout = async () => {
+    try {
+        await auth.logout()
+    } finally {
+        await navigateTo('/login')
+    }
+}
+</script>