Init

frontend/src/layouts/AdminLayout.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <v-app class="admin-layout">
+    <v-app-bar color="error" dark>
+      <v-app-bar-title>Console d'Administration</v-app-bar-title>
+      <v-spacer></v-spacer>
+      <v-btn prepend-icon="mdi-arrow-left" to="/">Retour à l'App</v-btn>
+    </v-app-bar>
+
+    <v-navigation-drawer permanent>
+      <v-list>
+        <v-list-item subtitle="Contrôle" title="Admin Panel"></v-list-item>
+        <v-divider></v-divider>
+        <v-list-item prepend-icon="mdi-view-dashboard" title="Dashboard" to="/admin"></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-main>
+      <v-container fluid>
+        <!-- Les pages d'administration s'injecteront ici -->
+        <router-view/>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/layouts/AppLayout.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <v-app>
+    <!--Top bar-->
+    <v-system-bar>
+
+      <v-spacer></v-spacer>
+
+      <v-icon>mdi-square</v-icon>
+
+      <v-icon>mdi-circle</v-icon>
+
+      <v-icon>mdi-triangle</v-icon>
+    </v-system-bar>
+
+    <v-navigation-drawer
+      color="grey-lighten-3"
+      rail
+    >
+      <v-avatar
+        class="d-block text-center mx-auto mt-4"
+        color="grey-darken-1"
+        size="36"
+      ></v-avatar>
+
+      <v-divider class="mx-3 my-5"></v-divider>
+
+      <v-avatar
+        v-for="n in 6"
+        :key="n"
+        class="d-block text-center mx-auto mb-9"
+        color="grey-lighten-1"
+        size="28"
+      ></v-avatar>
+    </v-navigation-drawer>
+    <v-navigation-drawer width="244">
+      <v-sheet
+        color="grey-lighten-5"
+        height="128"
+        width="100%"
+      ></v-sheet>
+
+      <v-list>
+        <v-list-item
+          v-for="n in 5"
+          :key="n"
+          :title="`Item ${ n }`"
+          link
+        ></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-main>
+      <!-- Les pages de l'application s'injecteront ici -->
+      <router-view/>
+    </v-main>
+  </v-app>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/layouts/AuthLayout.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <v-app class="auth-layout">
+    <v-main>
+      <!-- On injecte directement les pages qui gèrent déjà leur propre centrage et v-card -->
+      <router-view/>
+    </v-main>
+  </v-app>
+</template>
+
+<style scoped>
+
+</style>