Sépare l'app-bar et le navigation drawer dans deux composants

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app>
-    <AppAppBar />
+    <AppBar />
+    <GameStatus />
     <v-main>
       <HelloWorld msg="PIGNOUF ! " />
       <RouterLink to="/">Home</RouterLink>

src/components/AppBar.vue

@@ -21,21 +21,9 @@
 
       <template v-slot:append>
         <v-btn @click="toggleTheme" icon="mdi-theme-light-dark"></v-btn>
-        <v-btn icon="mdi-settings-helper"></v-btn>
       </template>
     </v-app-bar>
 
-    <!-- Settings contextuels a chaques pages,
-         TODO : composant a masquer avec le v-btn mdi-setting-helper  -->
-
-    <v-navigation-drawer>
-     <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
-      <v-divider></v-divider>
-      <v-list-item link title="List Item 1"></v-list-item>
-      <v-list-item link title="List Item 2"></v-list-item>
-      <v-list-item link title="List Item 3"></v-list-item>
-    </v-navigation-drawer>
-
 </template>
 
 <script setup>

src/components/GameStatus.vue

@@ -0,0 +1,13 @@
+<script>
+// L'affichage lateral gauche pour l'état du jeu (ex. Score)
+</script>
+
+<template>
+  <v-navigation-drawer>
+    <v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
+    <v-divider></v-divider>
+    <v-list-item link title="List Item 1"></v-list-item>
+    <v-list-item link title="List Item 2"></v-list-item>
+    <v-list-item link title="List Item 3"></v-list-item>
+  </v-navigation-drawer>
+</template>